Question

我希望这段代码能够在表格周围显示边框。它在Internet Explorer中，但在Firefox中没有。在Firefox中，它在表格上方显示一条水平线。如果我添加其他内容，例如div中<br />正确显示边框。如果我删除了对齐属性，它也可以工作这种行为的原因是什么？

<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>

Answer 1

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

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

这是因为它们旨在实现http://complexspiral.com/publications/containing-floats/

所示的效果

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

Answer 2

将此标记放在标记

之后

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

这将解决它。

FireFox </div>中表格周围的<div>边框问题

2 个答案: