Question

我有一个大容器（div）和一个标题div。它应该容纳100％宽度的容器。并且确实如此，而不是IE6（甚至在IE7中也是如此）。

HTML code：

<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％。但是由于填充它在其他浏览器中太长了......

Answer 1

如果向header添加100％，则可以使用：

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

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

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

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

1 个答案: