Chrome e largura fixa em um div (ou outras tags)

StackOverflow https://stackoverflow.com/questions/1900078

Pergunta

Eu tenho alguns html que se parece com isso: 

<div style="{ display:inline; width: 80px}">fig</div>vitamin c<br>
<div style="{ display:inline; width: 80px}">apple</div>vitamin a<br>
<div style="{ display:inline; width: 80px}">coconut</div>vitamin <br>

em IE.8 isso é mostrado como 

fig       vitamin
apple     vitamin
coconut   vitamin

e todas as 'vitaminas' estão bem alinhados. em cromo a diferença não é criado e, portanto, não é bem processado. 

figvitamin
applevitamin
coconutvitamin

A questão é: é este um problema / bug com o Chrome ou é porque o html não é correto e IE8 (neste caso) apenas suposições melhor minhas intenções?

Foi útil?

Solução

Chrome e Firefox estão corretas. Largura não é uma propriedade de estilo válido para elementos inline. Você tem várias opções:

Inline Blocos

Você pode fazer isso: 

<span>fig</span>vitamin<br>
<span>apple</span>vitamin<br>
<span>coconut</span>vitamin

com: 

span { display: inline-block; width: 80px; }

Você vai notar que eu usei <span> vez de <div>. Há uma razão para isto. <span>s são naturalmente display: inline e de acordo com Quirksmode :

No IE 6 e 7 obras inline-block apenas em elementos que têm uma naturais display: inline.

O Firefox 2 e menores não suportam esta valor. Você pode usar -moz-inline-box, mas esteja ciente de que não é o mesmo que inline-block, e não pode funcionar como você espera em algumas situações.

flutua

Você pode flutuar os rótulos esquerda: 

<div>fig</div>vitamin<br>
<div>apple</div>vitamin<br>
<div>coconut</div>vitamin

com: 

div { float: left; clear: left; width: 80px; }

Se o texto após o <div> é suficientemente grande que vai moldar-se à início da linha (não com o tampão 80px). Você pode querer isso ou não.

Lista Definição

Usando esta marcação: 

<dl>
  <dt>fig</dt><dd>vitamin</dd>
  <dt>apple</dt><dd>vitamin</dd>
  <dt>coconut</dt><dd>vitamin</dd>
</dl>

com: 

dt { float: left; width: 80px; }

Tabelas 

<table>
<tbody>
<tr>
  <td class="left">fig</td>
  <td>vitamin</td>
</tr>
  <td>apple</td>
  <td>vitamin</td>
</tr>
  <td>coconut</td>
  <td>vitamin</td>
</tr>
</tbody>
</table>

com: 

table { border-collapse: collapse; }
td.left { width: 80px; }

Tabelas será de longe a solução mais compatível (voltando ao IE5 ou anterior), de modo que eles estão ainda frequentemente utilizado em situações onde alguns podem argumentar que eles não são adequados. Os ideais da aderente chamado semântica Web são bem-intencionado e vale a pena a, sempre que possível, mas você também vai muitas vezes acabam em situações em que você está escolhendo entre "pureza semântica" e compatibilidade para trás de modo uma certa quantidade de necessidades pragmatismo a prevalecer.

Dito isto, a menos que você não está nos dizendo algo, você não precisa ir por esse caminho se você não quiser.

Por fim, sempre colocar uma declaração DOCTYPE em suas páginas. Obriga IE de peculiaridades modo a padrões modo compatível (ambos os eufemismos). Por exemplo: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<html>
...

Outras dicas

Você pode usar uma div que é flutuou à esquerda para os títulos - este é popular para duas formas de coluna e similares em sites que não querem usar tabelas, ou precisar de mais flexibilidade que o layout rigorosa que uma mesa restringe a. 

<div class="wrapper">
    <div style="float: left; width: 80px;">Banana</div>
    <div>Vitamin Awesome</div>
</div>

Eu acho que o div externa poderia ser substituído por um <br clear="both" /> depois.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top