1px不等於1px？

我試圖解決IE 8及以下版本中極其令人頭疼的問題。1px不等於1px？

看來，IE瀏覽器正在以不同的方式來解釋像素和FF和Chrome的功能。

我已經把該網站在這裏：www.therapyoracle.co.uk/new

如果向右滾動，你會看到，在div是大於它應該是。

容器#page的寬度爲1008px，橫幅div爲1008px，橫幅div內有兩個div，分別是600和408像素。現在我只有數學中的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; 
}

來源

2012-05-11 imperium2335

使用'reset.css'將瀏覽器的默認值設置爲首字母可能更好。 – MahanGM

無法訪問鏈接。確定它正在運行？除此之外，我向你保證，IE瀏覽器不會很好地進行數學運算......還有其他一些與盒子模型大小有關的事情使得它打破了你的佈局。 –

是的，它絕對是最好的。 – imperium2335

您的問題是由使用的拳擊模型（MDN link）的差異造成的。 IE通常使用邊框模型，而其他使用內容框模型。

所以在IE中#page的內容大小實際上是1008px減去邊框。作爲解決方案，您可以在IE8 +中設置box-sizing css屬性或將邊框設置爲零。

欲瞭解更多信息，看看上面的MDN鏈接。

來源

2012-05-11 17:19:40 Sirko

自IE6以來，IE不使用邊框模型，該網站正在以標準模式呈現。你確定*這是真正的問題嗎？ – duri

我也不認爲這是問題，因爲女人的形象已經在圖像中嵌入了邊框。右下邊框也是白色圖像的一部分。上面有兩個div，只有邊界權限適用於他們。 – imperium2335

@duri：幾乎是正確的，它實際上是以「幾乎標準」模式呈現 – reisio

1px不等於1px？

回答

相關問題