Chrome и Firefox верны. Ширина не является допустимым свойством стиля для встроенных элементов. У вас есть несколько вариантов:
Встроенные блоки
Вы можете сделать это:
<span>fig</span>vitamin<br>
<span>apple</span>vitamin<br>
<span>coconut</span>vitamin
с:
span { display: inline-block; width: 80px; }
Вы заметите, что я использовал <span> вместо <div>. Для этого есть причина. <span> s естественно display: inline и в соответствии с Quirksmode :
В IE 6 и 7 inline-block работает
только на элементах, которые имеют естественный
display: inline.
Firefox 2 и ниже не поддерживают это
значение. Вы можете использовать -moz-inline-box,
но имейте в виду, что это не то же самое, что
inline-block, и он может не работать как
вы ожидаете в некоторых ситуациях.
поплавки
Вы можете всплывать левые метки:
<div>fig</div>vitamin<br>
<div>apple</div>vitamin<br>
<div>coconut</div>vitamin
с:
div { float: left; clear: left; width: 80px; }
Если текст после <div> достаточно большой, он будет перенесен в начало строки (не в буфер 80px). Вы можете этого хотеть или нет.
Список определений
Использование этой разметки:
<dl>
<dt>fig</dt><dd>vitamin</dd>
<dt>apple</dt><dd>vitamin</dd>
<dt>coconut</dt><dd>vitamin</dd>
</dl>
с:
dt { float: left; width: 80px; }
Столы
<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>
с:
table { border-collapse: collapse; }
td.left { width: 80px; }
Таблицы, безусловно, будут наиболее обратно совместимым решением (начиная с IE5 или более ранней), поэтому они все еще часто используются в ситуациях, когда некоторые могут утверждать, что они не подходят. Идеалы так называемой семантической сети являются благими намерениями и их следует придерживаться, где это возможно, но вы также часто попадете в ситуации, когда выбираете между «семантической чистотой» и обратной совместимостью, поэтому определенное количество прагматизма должно преобладать.
Как говорится, если вы не говорите нам что-то, вам не нужно идти по этому пути, если вы не хотите.
Наконец, всегда помещают объявление DOCTYPE на ваши страницы. Он вынуждает IE переходить из режима совместимости в режим соответствия стандартам (оба эвфемизма) Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...