1pxは1pxと等しくないですか？

Question

私はIE 8以降で非常に刺激的な問題を解決しようとしています。

IEは、FFとChromeの違いとピクセルの解釈が異なるようです。

私はここに入れているサイト：あなたが右にスクロールすると、あなたはdivのは、それがあるべきよりも大きいことがわかりますwww.therapyoracle.co.uk/new

を。

コンテナの幅は1008px、バナーdivは1008px、このバナーdivの内側にはそれぞれ600と408ピクセルの2つのdivがあります。今私は数学ではCしか得られませんでしたが、600 + 408 = 1008はありませんか？ FFとChromeでうまく見えます。

IEが嫌いです。

「＃ページ」には罫線はありません。ここに私のCSSは：

#page { 
    margin:0 auto; 
    width:1008px; 
    background:white; 
    padding:0px; 
    min-height:100%; 
    position:relative; 
    margin-bottom:-22px; 
    box-sizing:content-box; 
} 

#header { 
    width:100%; 
    text-align:center; 
    background:#000000; 
} 
    #hCont { 
     margin:0 auto; 
     width:1000px; 
     height:100px; 
    } 
    #hLogo { 
     float:left; 
    } 
    #hContact p:first-child { 
     font-weight:bold; 
     font-size:16px; 
     margin-bottom:8px; 
    } 


#navCont { 
    width:100%; 
    background:#6a8a3f; 
    border-bottom:3px solid #1d2b00; 
} 

#nav { 
    margin:0 auto; 
    width:1000px; 
    height:35px; 
    font-size:17px; 
    color:#382D07; 
} 
    #nav ul { 
     padding:0; 
     margin:0; 
     list-style:none; 
    } 
    #nav li { 
     float:left ; 
     padding:6px; 
     padding-right:25px; 
    } 

#banner { 
    height:201px; 
    width:1008px; 

} 
    #img { 
     float:left; 
     width:600px; 
     height:201px; 
    } 
    .txt { 
     float:left; 
     width:408px; 
     height:67px; 
     padding:0; 
    } 
#opt1, #opt2 { 
    width:407px; 
    border-right:1px solid #1d2b00; 
} 
#right { 
    float:right; 
    width:250px; 
} 

Answer 1

あなたの問題は、使用されているボクシングモデル（MDN link）の違いが原因です。 IEは通常、境界ボックスモデルを使用しますが、他はコンテンツボックスモデルを使用します。

したがって、#pageの内容のサイズは、実際には1008pxから境界を差し引いたものです。解決策として、IE8 +にbox-sizing CSSプロパティを設定するか、または枠線をゼロに設定することができます。

詳細については、上記のMDNリンクを参照してください。