如何修復Webkit瀏覽器的這種奇怪的框模型行爲？

今天我遇到了Webkit瀏覽器的一個非常奇怪的行爲：它涉及到其他（浮動）塊旁邊的邊距計算方式。
儘管我認爲這一定是一個常見問題，但到目前爲止我還找不到它。如何修復Webkit瀏覽器的這種奇怪的框模型行爲？

這裏是我的情況：我有兩個<aside>秒，然後一個<div>。它們全部彼此相鄰顯示，左邊的<div>，然後.#aside-1和#aside-2。我做到這一點throught下面的CSS代碼：

aside { 
    margin-bottom: 30px; 
    padding: 0px 10px 10px; 
    width: 180px; 
} 

#aside-1 { 
    float: right; 
    margin-left: -400px; 
    margin-right: 200px; 
} 

#aside-2 { 
    float: right; 
} 

div { 
    overflow: auto; /* Block formatting context */ 

    margin-right: 400px; 
    padding: 0px 10px 0px 20px; 
}

這在Firefox和IE> 6工作正常。
然而，發生了什麼在Chrome和Safari是，div的margin-right不會從右邊界計算，而是僅僅從aside-2左邊計算。這導致div爲200像素（寬度+填充sidebar-2）太小。

是什麼原因導致這種行爲的Webkit，我該如何解決？
無論如何，非常感謝您的幫助提前！

好了，我測試了一點，用一個簡單的解決方案上來）：

只要給div一個固定的寬度。這當然只適用於你的佈局基於固定寬度的情況，這對我來說就是這種情況。

來源

2011-09-15 F30

沒有鏈接或完整的標記，任何事情我們說只是胡亂猜測。但是，您的評論顯示您必須誤解某些內容。如果沒有JavaScript幫助，任何版本的IE都不能理解與HTML5相關的任何內容。而且，甚至早期的Firefox版本也需要一些CSS幫助。所以我相信Chrome瀏覽器正在顯示您所寫的內容，並且您正在查看其他瀏覽器作爲參考。 – Rob

這個東西現在爲我解決了，但是由於我還是不明白效果，請隨時討論一下！ 1.我很遺憾不能共享一個鏈接的權利，但是從我測試過的錯誤應該是可見的，以及如果你只是創建與自由元素mininmal HTML文檔，我的CSS來源和使用看它Webkit Inspector。 2.對於早期版本，IE9確實可以使用簡單的JS修復。 3.我在這裏指的是Firefox> = 4，但正確的顯示方式也適用於以前的版本。 – F30

如果您希望我們完成這項工作，您將不會收到任何回覆。這就是jsfiddle的用途。爲您創建測試用例。無論如何，從來沒有，EVER使用IE作爲參考如何工作。始終，始終使用現代瀏覽器（除IE外的任何東西）。 – Rob

-1

嘗試用CSS RESET，應該工作。這裏有一個：http://html5doctor.com/html-5-reset-stylesheet/

來源

2011-09-16 01:36:32 BBee

我已經在我的完整版面中使用[Eric Meyer的重置]（http://meyerweb.com/eric/tools/css/reset/）。但是，我也嘗試了你所建議的那個，不幸的是它不工作。 – F30

也許你可以嘗試添加位置：相對;到你的

這將工作。但是，這並不是我想要的解決方案，而我stukk不明白爲什麼Webkit會以這種方式表現出利潤率。 – F30

如何修復Webkit瀏覽器的這種奇怪的框模型行爲？

回答

相關問題