Após uma atualização do Google Chrome, percebemos que todos nossos códigos estavam bugados pois a forma que o navegador estava renderizando a tag details é diferente.
Procuramos formas para resetar essa novidade (seta abre e fecha) e chegamos a alguns códigos para esse HTML:
<details open>
<summary>Blog Web Standards</summary>
<aside>Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia.</aside>
</details>
Reset CSS
details summary::-webkit-details-marker { display: none; }
Inclua no CSS essa linha conforme o seus estilos.
Reset do comportamento (abre e fecha)
A princípio desabilitamos com javascript, então escolha alguma das duas opções que desejar, com jQuery ou apenas com javascript sem jQuery.
Com jQuery
$(document).ready(function(){
$('details summary').click(function(){
return false;
});
});
Sem jQuery
window.onload = function() {
var summary = document.getElementsByTagName("summary");
for (var i = 0; i < summary.length; i++) {
summary[i].onclick = function () {
return false;
}
}
};
Inclua um desses trechos de javascript em seu código confome desejar.
Alguma dúvida, sugestão, melhoras ou outras formas de resolver estamos a disposição
Veja como resolver o bug no Firefox durante a estilização de um botão flexível (quando se usa um elemento dentro do button).
Layout do botão:
HTML:
<button class="botao" type="submit"><strong>Logar</strong></button>
CSS:
.botao,
.botao strong { display: inline-block; height: 27px; border: 0; background: url(../imagens/botao-marrom.png) no-repeat; line-height: 27px; text-shadow: rgba(72,25,24,.41) 1px 1px 0; color: #fff; }
.botao { padding-left: 12px; }
.botao strong { padding-right: 12px; background-position: right -27px; }
Nesse caso, a imagem de fundo do botão é o png “botao-marrom.png”:
Veja como o Firefox renderiza:
Para ajustar o bug, inclua o seguinte código no css:
button.botao::-moz-focus-inner { border: 0; padding: 0; }
Fonte da solução: a head creative
Quando você terminar de fazer seu email marketing com HTML e partir para testar no Internet Explorer, o layout fica quebrado, com linhas entre as fatias (normalmente este problema acontece no Hotmail).
Veja um exemplo: Quebra de layout no email marketing.
[as divs com style que vocês irão ver, servem para corrigir um Bug de renderização no Hotmail, para evitar as linhas de quebra de layout]
Exemplo do Código HTML (ainda com defeito):
<tr>
<td width="100" height="100">
<img src="blog.jpg" alt="Blog" width="100" height="100" />
</td>
</tr>
Deve estar igualzinho seu código, e tudo era para dar certo mas não deu? Veja o código que vai resolver seus problemas:
<tr>
<td width="100" height="100"><img src="blog.jpg" alt="Blog" width="100" height="100" /></td>
</tr>
O IE interpreta o ENTER que você coloca para organizar seu código e indentação, como uma quebra de linha.
— RESUMO —
A solução é deixar o elemento e tudo que tem dentro, na mesma linha.
Gerador de e-mail marketing
Para facilitar o trabalho de inserção das medidas de cada imagem em sua célula-mãe e a criação de uma div envolvendo com sua altura correspondente, criamos o Gerador de e-mail marketing:
http://www.webstandards.blog.br/exemplos/gerador-email-marketing/
Problema: Um bug extremamente estranho é a imagem que só funciona no Firefox, enquanto no Internet Explorer simplesmente não aparece!
Mágica? Não! Talvez o arquivo esteja corrompido.
Solução: Salvar a imagem novamente, para que funcione nos outros navegadores.
