Question

我在使用固定布局和固定列大小的IE7和表时遇到了一些问题。大多数浏览器使用列宽来设置单元格的大小，包括填充，但IE7似乎设置它不包括填充，所以有一个过度挂起。

我再次搜索，搜索和搜索了一个解决方案，但除了将“box-sizing：border-box”应用于其他所有内容之外，我找不到任何体面的东西，这是不可能的。删除“table-layout：fixed”也有效，但其他代码依赖于此。

如何在浏览器之间获得一致性？

<!-- DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" -->
<html>
  <head>
    <style type="text/css">
      div {
        width: 200px;
        height: 10px;
        background-color: blue;
      }
      table {
        width: 200px;
        border-collapse: collapse;
        table-layout: fixed;
      }
      .first {
        width: 50px;
        background-color: green;
      }
      .second {
        width: 150px;
        background-color: red;
      }
      .alt {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <table>
      <colgroup>
        <col class="first" />
        <col class="second" />
      </colgroup>
      <tr>
        <td>Foo</td>
        <td class="alt">bar</td>
      </tr>
    </table>
  </body>
</html>

类似的问题：<col> width and padding - IE7

IE7 SS IE7 screenshot

IE9 SS IE9 SS

Answer 1

IE不支持表填充。您需要将填充应用于表数据单元格。

IE7 - 当单元格有填充时修复列宽问题

1 个答案: