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

Artigos relacionados:

1. Usando target blank em XHTML Strict Para usar o atributo target="_blank" para que links abram em...

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

Nenhum artigo relacionado.

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/

Artigos relacionados:

1. Email marketing: usando HTML e CSS Limitações HTML e CSS para desenvolver templates de Email Marketing...
2. Como testar o site no IE6, IE7 e IE8? Quer saber alguma maneira de testar seu site no Internet...

Mágica? Não! Talvez o arquivo esteja corrompido.

Solução: Salvar a imagem novamente, para que funcione nos outros navegadores.

Nenhum artigo relacionado.