CSS IE6 案例 - 内部 div 不适合 100%答案

【问题标题】：CSS IE6 case - inner div doesn't fit in 100%CSS IE6 案例 - 内部 div 不适合 100%
【发布时间】：2012-10-17 03:40:10
【问题描述】：

我有一个大容器 (div) 和一个标题 div。它应该适合容器 100% 的宽度。它在任何地方都可以，而不是 IE6（甚至在 IE7 中也是如此）。

HTML 代码：

<body>
   <header>
      <table summary="Displaying something">
         <tr class="first-row">
            <th>Fdsfdsf:</th>
            <td>fdjsklf</td>
         </tr>
         <tr>
            <th>dfdsfdsf:</th>
            <td>vcxvcx</td>
         </tr>
         <tr>
            <th>FDSfjdsklf</th>
            <td>FDsjfkdsj</td>
         </tr>
      </table>
   </header>
</body>

还有 CSS：

* {
    margin:                 0;
    padding:                0;
}
html {
    font:                   62.5% verdana, geneva, sans-serif;
    line-height:            1.125em;
    background-color:       silver;
    text-align:             center;
}
body {
    background-color:       white;
    width:                  79%;
    min-width:              1024px;
    max-width:              1920px;
    margin:                 3% auto;
    text-align:             left;
}
header {
    padding:                1em;
    border-bottom:          1px solid silver;
    text-align:             center;
}
header table {
    margin:                 0 auto;
}
header table tr {
    font-size:              0.8em;
}
header table .first-row {
    font-size:              1em;
}
header table th {
    font-weight:            normal;
    padding:                0 10px 0 0;
    text-align:             right;
}
header table .first-row th {
    font-weight:            bold;       
}
header table .first-row td, header table .first-row th {
    border-bottom:          1px dotted silver;
}

对不起，代码的长度。为了检查标题大小，我添加了底部边距。它非常适合外部容器的左侧。由于标题没有在文件中设置宽度，因此它也应该适合外部 div 到右侧。但是，右侧存在间隙。边框的末端离右边有点远（大约20px），所以太短了。

你能看出问题吗？我尝试了一切，唯一有效的是在标题中设置宽度：100%。但是由于填充它在其他浏览器中太长了......

【问题讨论】：

您是否有理由需要支持 IE6？大多数时候回到 IE7 应该没问题。一些网站甚至不再为低于 IE9 烦恼。
为什么支持IE6？我不是说不要问你的问题；也许你别无选择。但是在 2012 年看到“IE6”还是挺意外的，也让我很好奇。
据我了解，大约 80% 的人使用 IE
ie6countdown.com 加拿大用户 0.7% 美国用户 0.4% 英国用户 0.9% 除非您的主要用户群在印度、日本或越南...的用户低于 5% 这很像支持 800x600 分辨率，绝大多数用户不再使用该分辨率。

标签： html css internet-explorer-6

【解决方案1】：

如果将 100% 添加到 header 有效，您可以使用：

header {
    padding:                1em;
    border-bottom:          1px solid silver;
    text-align:             center;
    width:                  100%;
    box-sizing:             border-box; /* that's the magic */
}

由于box-sizing 的强大功能，后续浏览器中的总长度将包含填充。

正如他们已经在 cmets 中指出的那样，unless you live in China 您可能可以忽略 IE7 及以下版本。

【讨论】：

顺便说一句...我很好奇为什么在另一个 div 中设置 div 的 100% 宽度会使其太宽...
是的，它不是，但你说“唯一有效的是在标题中设置宽度：100%”。这样您就不会在较新的浏览器中出现滚动条。
@user1615069：我猜是因为填充。