Question

Bellow是html代码，当页面符合标准时，div会被表格边框切割，如果我删除<!DOCTYPE html>，那么它的工作正常按预期进行。

我希望在div之外放在标准表中，这只发生在IE8标准中（IE8怪癖表现得如预期的那样）。 IE11怪癖和标准也有同样的问题。即使在标准和怪癖中，Chrome也不会出现这类问题。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

尝试添加

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

td border将div放在外面，并在标准中放在桌子上

1 个答案: