Хром и фиксированная ширина на div (или другие теги)

У меня есть HTML, который выглядит так:

<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>

в IE.8 это показано как

фиговый витамин
яблочный витамин
витамин кокоса

и все "витамины" хорошо выровнены. в Chrome этот пробел не создается, и поэтому он не очень хорошо отображается.

figvitamin
applevitamin
coconutvitamin

Вопрос в том, является ли это проблемой / ошибкой в ​​Chrome или потому, что HTML-код неверен, а ie8 (в данном случае) просто угадает мои намерения?

Источник

2 ответа

Решение

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>с естественно 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>
...
Источник

Вы могли бы использовать div, который перемещается влево для заголовков - это популярно для двухколоночных форм и т. П. На веб-сайтах, которые не хотят использовать таблицы, или нуждаются в большей гибкости, чем строгая компоновка, которую ограничивает таблица.,

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

Я думаю, что внешний div можно заменить на <br clear="both" /> после этого.

Источник
Другие вопросы по тегам