我希望此代码在表格周围显示边框。它在 Internet Explorer 中有效，但在 Firefox 中无效。在 Firefox 中，它在表格上方显示一条水平线。如果我添加任何其他内容，例如<br />在 div 中，边框显示正确。如果我删除对齐属性，它也会起作用。
这种行为的原因是什么？
<body>
<div style="border-style: solid; border-width: 1px;
border-color: #A8A8A8; width: 100%">
<table align="left" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
Sample Text<br />
</td>
</tr>
</table>
</div>
</body>
最佳答案
该表使用已弃用的 align 属性。这已替换为 CSS float 属性并具有相同的效果。
默认情况下， float 元素不会影响其容器的高度(我相信如果 Doctype 触发 Quirks 模式，此功能在 IE 中未正确实现，这可能解释了您所看到的渲染差异。添加标准模式触发 Doctype 以避免这种情况以及浏览器之间的许多其他不一致)。
这是因为它们旨在实现如 http://complexspiral.com/publications/containing-floats/ 所示的效果
参见 http://www.ejeliot.com/blog/59用于使容器扩展以覆盖 float 上下文的多种方法。我发现溢出:隐藏技术通常是最佳选择。
关于html - FireFox 中表格周围的 <div> 边框问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1420976/