FireFox 中表格周围的 <div> 边框出现问题答案

【问题标题】：Problem with <div> border around table in FireFoxFireFox 中表格周围的 <div> 边框出现问题
【发布时间】：2009-09-14 19:30:58
【问题描述】：

我希望这段代码在表格周围显示一个边框。它在 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>

【问题讨论】：

标签： html css cross-browser

【解决方案1】：

该表使用已弃用的align 属性。这已被 CSS float 属性替换，并且具有相同的效果。

默认情况下，浮动元素不会影响其容器的高度（如果 Doctype 触发 Quirks 模式，我相信此功能在 IE 中未正确实现，这可能是您看到的渲染差异的原因。添加标准模式触发 Doctype 以避免这种情况以及浏览器之间的许多其他不一致）。

这是因为它们旨在实现如http://complexspiral.com/publications/containing-floats/所示的效果

请参阅http://www.ejeliot.com/blog/59 了解使容器扩展以覆盖浮动上下文的多种方法。我发现溢出：隐藏技术通常是最好的选择。

【讨论】：

+1，用于推荐不同于典型 clearfix 解决方案的选项。另外，我以前没有遇到过，所以谢谢！ =)

【解决方案2】：

把它放在你的标签后面

<div style="clear:left;"></div>

这样就解决了。

【讨论】：

这个标签应该放在哪里？