Chrome和Firefox以不同的負邊距呈現定位佈局 - 如何防止？

我有一個非常具體的佈局來實現與HTML/CSS。基本上我有一個文本容器，裏面有幾個左浮動框。然後我有一個頁腳，它需要在底部重疊這個文本容器幾個像素。我通過在頁腳上使用負頂邊來實現此目的，並在文本容器和頁腳上設置position:relative和z-index以使頁腳層堆疊位於文本容器上方。Chrome和Firefox以不同的負邊距呈現定位佈局 - 如何防止？

它可以在小提琴最好的演示：http://jsfiddle.net/sW9cu/2/。

問題是，在IE9和Firefox18中，頁腳的內容會清除文本框的內容，而在Chrome中，頁腳的內容會覆蓋文本框的內容而不進行任何清除。

我基本上需要在IE7 +，Firefox和Chrome中以某種方式保持一致。不用打擾它 - 它可以清除或重疊，但它需要表現相同，無論瀏覽器如何。

任何人都可以看到它爲什麼這樣做以及如何糾正它？這可能與我在文本容器上使用的微觀清除修復有關，但我確實不確定。

感謝任何指針人 - 這一個讓我難住！

來源

2013-01-24 Dan

排序。我無法克服目前的加價問題，但通過消除負面的頂部位置並在頁腳內添加一個絕對定位的div，其頂部值爲負值（top: -20px;），這已達到我所期望的水平。參見：http://jsfiddle.net/sW9cu/4/。

來源

2013-01-24 15:14:21 Dan

-4

據我所知，答案會是WebKit的CSS中

的Internet Explorer，Firefox和WebKit的三種不同的東西。 Safari和Chrome使用Webkit。 moz適用於Mozilla o適用於Opera 「正常」適用於Internet Explorer。

你可以閱讀更多關於here

來源

2013-01-24 11:33:31 souichiro

謝謝，但我認爲你誤解了。我不想用CSS3轉換做任何事情。僅僅嘗試在Firefox和Chrome等中實現相同的佈局。如果您在這些瀏覽器中查看小提琴，您將看到不同之處。我只是需要他們渲染相同。 – Dan

鏈接只是一個例子。正如我所說，你應該只添加[webkit moz o ...]選項到你的css中，正如我所說的，每個瀏覽器都以不同的方式使用它，所以你可以實現你的目標（在每個瀏覽器中看起來都一樣） – souichiro

http ：//webdesign.about.com/od/css/a/css-vendor-prefixes.htm是正確的地方，也在我的文章中進行了編輯。 – souichiro

Chrome和Firefox以不同的負邊距呈現定位佈局 - 如何防止？

回答

相關問題