Chrome瀏覽器弄亂了網站佈局，FF和IE很好

我正在一個網站上工作：http://www.bbp.nl/luuk-test/wac 它在FF和IE上的顯示效果非常好。我去測試它在Chrome中，它完全搞砸了。 Chrome35以某種方式顯示彼此之下的所有div。我真的不知道在哪裏看，因爲它在W3C驗證器中也能很好地驗證。Chrome瀏覽器弄亂了網站佈局，FF和IE很好

也搜索了它，但找不到任何東西。有人知道答案嗎？請幫忙。

來源

2010-03-15 Luuk

它驗證嗎？在顯示代碼之前，FF傾向於整理代碼。 – 2010-03-15 10:10:52

剛纔你對網站做了些什麼，或者佈局有些根本性的錯誤。我在Fx 3.6中檢查過它，它也完全搞砸了。如果該網站僅適用於IE，則表明該佈局依賴於IE bug來按預期顯示。 – Guffa 2010-03-15 10:22:42

首先它會很有用，如果你的HTML更容易閱讀。

您在第41行打開段落標記，可能是這個問題？

來源

2010-03-15 10:09:29 Machiel

我也無法找到在第41行打開的段落的結束標記。確保您的HTML有效並在http://browsershots.org/等網站上進行測試是非常重要的。 – 2010-03-15 10:11:49

您正在使用樣式表的第20行中的-moz-box-sizing來爲您的div更改mozilla瀏覽器的計算大小。這在Chrome中無法識別。

參見：https://developer.mozilla.org/en/CSS/-moz-box-sizing

可以使用WebKit的申請瀏覽器修復，太：

 
div { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
}

在我看來，更好的方法是使你的網站看起來不錯沒有此解決方案，並計算你的基於其所需尺寸的盒子尺寸減去它的襯墊。

來源

2010-03-15 10:12:45 stefanglase

所以在這個問題上沒有鉻的修復，就像我找到的Firefox？ – Luuk 2010-03-15 10:22:58

如果您想保留此修復程序，請嘗試使用： -moz-box-sizing：border-box;箱尺寸：邊界盒; -webkit-盒大小：邊界盒; – stefanglase 2010-03-15 10:29:41

獲取此插件的Firefox，它會告訴你所有你有你的頁面上的錯誤...包括作爲Machiel提到的開放式< - 對 - >標籤...

https://addons.mozilla.org/en-US/firefox/addon/249

來源

2010-03-15 10:15:40 jason

這不是P，我把它刪除了，它似乎選擇在div的外部而不是內部添加填充 – Luuk 2010-03-15 10:26:22

在你的CSS，你有：

box-sizing: border-box; 
-moz-box-sizing: border-box;

要獲得的WebKit器（Chrome/Safari瀏覽器）這方面的工作，使用-webkit-box-sizing

-webkit-box-sizing: border-box;

來源

2010-03-15 10:33:15

我會完全刪除那些箱子大小的屬性，並使用更多的符合性的特性，如填充，邊距，寬度和高度的大小。

來源

2010-03-15 11:35:07 Alex

Chrome不支持box-sizing，這是因爲CSS3的一部分而引起的煩人。

如果您爲DIV指定100％的邊距，然後給它一個邊框和5px的邊距（例如），則會出現問題。隨着框大小設置爲邊框，你會得到一個很好的縮進DIV。沒有框大小，div溢出。現在，你可以通過使用包裝DIV來解決它，但這是額外的標記，或者通過指定像素的寬度，但如果你不知道寬度，這將不起作用。

來源

2012-02-23 16:26:25 Puzbie

Chrome瀏覽器弄亂了網站佈局，FF和IE很好

回答

相關問題