Почему <div style = "width: 50%" /> не отображается в xHTML? - PullRequest
3 голосов
/ 24 октября 2009

Почему <div style="width:50%" /> не отображается в xHTML? Если я сделаю <div style="width:50%"> &nbsp; </div> только тогда, это будет оказано. Я что-то пропустил? Поможет ли минимальная ширина? Я использую строгий xHTML 1.0

Можно ли исправить это только с помощью CSS или я должен изменить разметку html?

Ответы [ 3 ]

10 голосов
/ 24 октября 2009

Поскольку DIV не является самозакрывающимся элементом ни в XHTML , ни в HTML.

Вы должны связать открывающий тег (<div>) с закрывающим (</div>).

С другой стороны вашего вопроса:

<div style="width:50%">&nbsp;</div>

<div style="width:50%"></div>

Разница между ними заключается в том, что в первом есть неразрывный пробел, который заполняет DIV. Во втором ничего нет. Вот почему вы не увидите ничего рендера во второй версии.

Кроме того, XML и XHTML - это не одно и то же. Последний заимствует соглашение о самозакрытии тега, если он не является частью совпадающей пары.

5 голосов
/ 24 октября 2009

Хотя в XHTML следует избегать самозакрывающегося <div /> (поскольку в устаревших браузерах HTML он не будет анализироваться должным образом), на самом деле это не имеет ничего общего с XHTML: это проблема компоновки.

<div></div>

- это блочный элемент, не содержащий содержимого. Поэтому его высота равна нулю; Вы не можете видеть это.

<div>&nbsp;</div>

- это блочный элемент, содержащий одну строку текста. Его высота равна свойству line-height.

Если вы хотите, чтобы пустой div имел некоторую высоту, вы должны сказать так:

<div style="width: 50%; height: 2em; background: red;"></div>

Это старая ошибка IE5, что пустой div все равно будет отображаться с высотой, как если бы он содержал строку текста. Когда вы используете тип документа в стандартном режиме (которым вы должны быть, независимо от того, используете ли вы HTML или XHTML, Transitional или Strict), вы не увидите такого поведения.

4 голосов
/ 24 октября 2009

Допустимые самозакрывающиеся теги в XHTML:

<area />
<base />
<basefont />
<br />
<hr />
<input />
<img />
<link />
<meta />

DIV должен иметь начальный и конечный теги.

...