td border在外部剪切div，并将其放置在ie标准中的表上

Bellow是html代码，当页面处于标准状态时，div会被表边框剪切，如果我删除<!DOCTYPE html>，则其工作正常。

我希望在标准中的div之外，这种情况仅在IE8标准中发生（IE8怪癖的行为与预期一致）。IE11的怪癖和标准也有同样的问题。Chrome即使在标准和怪癖方面也没有这种问题。

我不明白为什么这种情况只发生在IE中。我只想知道这种行为背后的确切原因以及正确的解决方案。

table {
  background-color: red;
}
#footer {
  background-color: yellow;
  margin-top: -10px;
}

<div>
  <table border=1>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </table>
</div>
<div id="footer">Footer</div>

尝试添加

#footer {
  position: relative;
}

table {
  background-color: red;
}
#footer {
  background-color: yellow;
  margin-top: -10px;
  position: relative;
}

<div>
  <table border=1>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </table>
</div>
<div id="footer">Footer</div>

相关内容

最新更新

热门标签：