那麼，哪些瀏覽器可以正確解釋CSS Box Model，Firefox，IE或Chrome

在Firefox和IE中，填充永遠不會相同，而IE會在填充高度和寬度時添加填充，Firefox會忽略它。什麼是正確的解釋，以及在所有瀏覽器中實現相同外觀的嵌套方式是什麼。 firefox和Ie的差距是否有所不同？那麼，哪些瀏覽器可以正確解釋CSS Box Model，Firefox，IE或Chrome

來源

2011-12-05 Mike

你可以提供一個樣本，比如說http://jsfiddle.net/ – eyelidlessness

我在說一般的 – Mike

「那麼，這些人中哪些人正確地解釋了CSS Box Model，Firefox，IE或Chrome」我確定所有人（對於IE的最新版本）。 – BoltClock

您需要使用reset CSS才能確保不同瀏覽器選擇的不同默認值已被中和。

您看到的差異是由於每個瀏覽器對不同元素的邊距和填充的默認值不同。

另外一個問題是，在將寬度/高度應用於容器之前，某些瀏覽器需要將某些內容放在容器中（比如表格單元格或div）。這可以通過添加一個非空格 -  來輕鬆完成。

來源

2011-12-05 18:44:28 Oded

添加這個之後，將firefox添加css的高度和寬度 – Mike

@Mike - 哪個css的高度和寬度？你沒有顯示任何HTML或CSS。 – Oded

我在說一般。填充是neber是相同的即和ff例如 http://stackoverflow.com/questions/8370008/firefox-wrong-interpretation-of-box-model – Mike

所有來自過去10年的瀏覽器都正確渲染盒子模型如果您沒有在兼容模式或怪癖模式下運行。這意味着你必須有一個有效的文檔類型，它必須在第一行（doctype之前的任何東西都會將IE引入到quirksmode中），並且你不能做非法的事情也會將它扔到quicksmode中。

如果你有有效的內容，有效的文檔類型，內容將呈現相同..雖然不同的瀏覽器可能有不同的默認值的一些樣式，這是一個好的HTML重置文件派上用場。這會使遊戲區域變得平坦，所以所有瀏覽器都具有相同的默認樣式。

來源

2011-12-05 19:04:43

非常有用+1添加至少 – Mike

在現代瀏覽器中，您可以使用box-sizing CSS property指示瀏覽器瞭解所需的確切框模型。如果缺少這樣的屬性，自2000年以來建立的所有瀏覽器（aprox。）將默認爲舊的W3c box model。在這種模型中，邊距和填充都不是內容尺寸（寬度和高度）的一部分，如this figure所示。

實際上，我敢說99％的網站依賴後者，其餘的網站都是爲Netscape和Internet Explorer 4設計的，並且自那時起就被拋棄了。

如果您需要支持非常舊版本的Internet Explorer，請確保您具有合適的DOCTYPE的有效HTML。否則，IE將在怪癖模式下渲染，並可能恢復爲舊盒子尺寸模型。

來源

2011-12-05 19:05:37

+1添加，很好的信息 – Mike

我同意麥克：我也是+1 – danicotra

那麼，哪些瀏覽器可以正確解釋CSS Box Model，Firefox，IE或Chrome

回答

相關問題