Question

IE 7将填充添加到列的总宽度。 Firefox和Chrome包含宽度填充。如何在浏览器之间获得一致性？

<!DOCTYPE html>
<html>
  <head>
    <title>Col Padding</title>
    <link rel='stylesheet' type='text/css' media='all' href='http://meyerweb.com/eric/tools/css/reset/reset.css' />
    <style type='text/css'>
      #col1
      {
        width: 200px;
      }
      #theTab td
      {
        background-color: green;
        padding: 10px;
      }
      #theBar
      {
        width: 200px;
        height: 20px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id='theBar'></div>
    <table id='theTab'>
      <col id='col1'/>
      <tr>
        <td>Data</td>
      </tr>
    </table>
  </body>
</html>

Answer 1

IE8及更高版本以及您可能需要支持的所有其他内容，支持使用box-sizing CSS property覆盖每个元素的框大小调整的工作方式。

如果您必须支持IE7，请在border-box所需的任何内容上设置大小调整大小; IE7将忽略该属性，但无论如何都要遵循该模型，其他一切都将与IE7的行为相匹配。

也就是说，当处于“标准模式”时，IE6及更高版本的应该支持W3C标准模型。您应该仔细检查您的DOCTYPE，以确保它们将调用该渲染模式而不是“怪癖模式”。

Answer 2

为IE创建一个单独的样式表并使用条件语句加载它，或者接受IE是较小的浏览器并且不能正确显示编写良好的代码。

选项1似乎最令人满意; - ）

宽度和填充 - IE7

2 个答案: