IE7 - 修复单元格有填充时的列宽问题答案

【问题标题】：IE7 - fixing column width issue when cell has paddingIE7 - 修复单元格有填充时的列宽问题
【发布时间】：2012-07-23 14:03:19
【问题描述】：

我在使用 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 不锈钢

IE9 不锈钢

【问题讨论】：

您需要使用条件语句。

标签： html css browser internet-explorer-7 html4

【解决方案1】：

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

【讨论】：