Question

我想显示一个背景颜色的div，其高度和宽度设置为100％，但没有内容。是否有可能在没有放置＆amp; nbsp;内？

编辑：感谢Mark Biek指出宽度和高度样式的空div显示了我的期望。我的div在一个表格单元格中，它没有显示。

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

Answer 1

这似乎适用于Firefox，Safari，IE6和＆amp; 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>

Answer 2

嗯...我不确定具体说明是什么，但我知道虽然空内联元素（例如span）是有效的，但是空块元素（例如p或div）被“清理”了HTML的整洁。

因此，我认为坚持使用＆amp; nbsp;更安全因为它对你的情况没有害处。我还要添加一个评论，例如“＆lt;！ - background container - ＆gt;”或类似的东西。因此，每个想要更改你的HTML的人都知道div具有特殊意义，即使它是空的。

Answer 3

恕我直言，如果您希望它们实际呈现为某些东西，您应该包含其他空DIV。

在“理论”注释中......如果没有内容，浏览器不会假设显示任何内容。整个点是指示空的空间。这既是常识又是（我相信）标准。

实际上......你有三个选择。一个是离开，知道你会得到不可预知的结果。这可能是最容易编码的。另一种方法是始终包括nbsp，或者总是把它放在div的末尾或者测试为空，如果它是空的则添加nbsp。第三个是测试浏览器并在需要时插入。

Answer 4

我认为这取决于浏览器（IE / Gecko引擎/ Webkit引擎）和模式（标准模式，Quirks模式）。我有一些div在FFox /标准模式下出现而没有出现在IE6 / 7中。

您可能只能使用css以跨浏览器方式执行此操作，但您可能会使用某些css hacks。

Answer 5

根据经验，IE不会渲染空元素的边框（至少是空的＆lt; td＆gt;元素）

Answer 6

也许

#foo {empty-cells: show;}

虽然这可能仅适用于<td>

Answer 7

您应始终包含 。

是否需要显示一个空的<div>？</div>

7 个答案: