0

IE 8 以下で非常に厄介な問題を解決しようとしています。

IE は FF や Chrome とは異なる方法でピクセルを解釈しているようです。

ここにサイトを掲載しました: www.therapyoracle.co.uk/new

右にスクロールすると、div が本来よりも大きいことがわかります。

#pageコンテナの幅は1008px、バナー div は です1008px。このバナー div 内には、それぞれ 600 ピクセルと 408 ピクセルの 2 つの div があります。今は数学で C しか取れなかったけど、600+408=1008 じゃない? FFとChromeで問題なく見えます。

私はIEが嫌いです。

ただし、「#page」には境界線がありません。これが私の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;
}
4

1 に答える 1

2

あなたの問題は、使用されているボクシング モデルの違いによって引き起こされます ( MDN リンク)。IE は通常、ボーダー ボックス モデルを使用しますが、他の IE はコンテンツ ボックス モデルを使用します。

したがって、IE のコンテンツのサイズは、#page実際には 1008px から境界線を引いたものになります。解決策として、box-sizingIE8+ で css-property を設定するか、borders をゼロに設定することができます。

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

于 2012-05-11T17:19:40.753 に答える