0

我有一个大容器（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%。然而，由于填充它在其他浏览器中太长了......

4

1 回答 1

3

如果将 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的强大功能，在以后的浏览器中，填充将包含在总长度中。

正如他们已经在评论中指出的那样，除非您住在中国，否则您可能会忽略 IE7 及以下版本。

于 2012-10-16T19:40:10.513 回答