0

1つの大きなコンテナ（div）とその中に1つのヘッダー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 に答える