IE中的CSS寬度有所不同？

所以我有一個標準的960寬度的網站，裏面的內容是，我有300個寬度的盒子，每邊10個邊距，所以他們會漂浮3個。它在FF和Chrome中看起來很好，但爲什麼在IE中第三個盒子總是跳到下一行並放棄位置。這就像IE讀取寬度不同於任何其他瀏覽器。這太惱人了，有什麼方法可以解決這個問題嗎？IE中的CSS寬度有所不同？

來源

2014-07-10 zeeb44

你有任何代碼可以告訴我們嗎？ – Smeegs

很可能是導致不一致的用戶代理風格。沒有看到任何代碼，我的建議是使用像下面建議的@ l2aelba CSS重置。 – APAD1

看你的網站後，你在你的樣式表有這種風格，因爲它是在不同的瀏覽器的計算方式不同，在IE

.site { 
    margin: 0 auto; 
    max-width: 960px; 
    max-width: 68.571428571rem; 
    overflow: hidden; 
}

提防的EM它計算到955.4px左右，這就是爲什麼你會得到包裝。

樣式更改爲

.site { 
    margin: 0 auto; 
    max-width: 960px; 
    overflow: hidden; 
}

，你應該罰款。

來源

2014-07-11 12:06:07 Smeegs

是的，就是這樣。杜，我應該看到這一點。 WordPress的喜歡使用EM，我通常不會使用它。謝謝一堆。 – zeeb44

你必須開始之前的所有元素復位（CSS重置）

例子：http://necolas.github.io/normalize.css/

爲什麼？：CSS reset - What exactly does it do?

來源

2014-07-10 17:19:24 l2aelba

我想你應該詳細說明這一點。爲什麼他應該重置，首先是什麼導致了問題？ – sharf

@ user3669154編輯 – l2aelba

這是一個相當懶惰的做法。如果這些鏈接在某個地方斷了，該怎麼辦？ – sharf

正如l2aelba所說，您需要重置您的元素。問題是每個瀏覽器都有各自不同元素的默認值。所以IE可能會添加其他人不需要的填充，使得你的元素太大而不適合，所以他們環繞。

重置使每個瀏覽器顯示的內容儘可能相似。

沒有看到您的HTML和CSS，沒有確定的方式來確定您的問題屬性是什麼。

解決方案：

你的問題是這樣的一行：

max-width: 68.571428571rem;

這是對你的CSS的INE 1967年。它覆蓋了960的寬度，因爲該值實際上小於960像素，因爲它是第二個。甚至不知道爲什麼你在那裏...

來源

2014-07-10 17:28:42 sharf

這聽起來是對的，我會添加一個重置它，看看是否有幫助，如果不是，我會回覆的網站和代碼。 – zeeb44

@ zeeb44我無法通過修復程序更新我的答案，但未看到受影響區域的代碼（不是網站）。不過，我確實看過這個網站，你的問題是，在IE中，你的'入門內容'類只有955.4px寬，而不是960px。 – sharf

IE中的CSS寬度有所不同？

回答

相關問題