Нужно ли показывать пустую <div>? - PullRequest
Новая
       13

Нужно ли показывать пустую <div>?

14 голосов
/ 13 октября 2008

Я хотел бы показать div, у которого есть цвет фона с высотой и шириной, установленными на 100%, но без содержимого. Можно ли это сделать, не вставляя & nbsp; внутри

Edit: Спасибо Mark Biek за указание на то, что пустой div со стилями ширины и высоты показывает, как я ожидал. Мой div находится в ячейке таблицы, где он не отображается. 

<table style="width:100%">
<tr>
<th>Header</th>
<td><div id="foo"></div></td>
</tr>
</table>

Ответы [ 7 ]

5 голосов
/ 13 октября 2008

Это похоже на работу в Firefox, Safari, IE6 и IE7. 

<html>
    <head>
        <style>
            #foo{
                background:  #ff0000;
                width:  100%;
                height:  100%;
                border:  2px dashed black;
            }
        </style>
    </head>
    <body onload="">
        <div id="foo"></div>
    </body>
</html>

3 Пример браузера

4 голосов
/ 13 октября 2008

Хммм ... Я не уверен, что именно говорят спецификации, но я знаю, что хотя пустые inline-элементы (например, span) являются действительными, пустые блочные элементы (например, p или div) "очищаются" HTML-порядок.

Таким образом, я бы сказал, что безопаснее придерживаться & nbsp; как это не навредит в вашем случае. Я также добавил бы комментарий вроде «<! - background container ->» или что-то в этом роде. Так что каждый, кто собирается изменить ваш html, знает, что div имеет особое значение, даже если он пустой.

2 голосов
/ 13 октября 2008

ИМХО, вы должны включить nbsp для других пустых DIV, если вы хотите, чтобы они действительно отображались во что-то.

На "теоретической" заметке .. браузер не должен показывать что-либо, если нет содержимого. Весь смысл nbsp - указать пустое место. Это и здравый смысл, и (я считаю) стандарт.

С практической стороны ... у вас есть три варианта. Один из них - оставить без внимания, зная, что вы получите непредсказуемые результаты. Это, вероятно, самый простой код. Другой способ - всегда включать nbsp, либо всегда помещая nbsp в конце div, либо проверяя наличие пустых значений, и добавляя nbsp, если он пуст. Третий - тестировать браузер и вставлять nbsp при необходимости.

0 голосов
/ 12 февраля 2009

Вы должны всегда включать &nbsp;.

0 голосов
/ 15 октября 2008

возможно

#foo {empty-cells: show;}

хотя это может быть только для <td>

0 голосов
/ 13 октября 2008

Из опыта IE не будет отображать границы пустых элементов (по крайней мере, пустых

элементов)
0 голосов
/ 13 октября 2008

Я думаю, что это зависит от браузера (IE / Gecko Engine / Webkit Engine) и от режима (Стандартный режим, режим Quirks). У меня были некоторые div, появляющиеся в режиме FFox / Standards и не появляющиеся в IE6 / 7.

Вы, вероятно, можете сделать это кросс-браузерным способом только с css, но вы, вероятно, прибегнете к некоторым хакам css.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...