Chrome和Firefox之間的圖像定位不同

我有兩個圖像需要直接放置在彼此的頂部。這個HTML由腳本每隔一段時間生成一次，所以我已經將CSS直接包含在HTML本身中。Chrome和Firefox之間的圖像定位不同

<div style="text-align:center"> 
<img id="background" 
style="position: absolute; z-index: 1; " 
src="background.png"/> 
<img id="foreground" 
style="position: relative; z-index: 10; " 
src="foreground.png" border="0" usemap="#map"/> 
</div>

它的工作原理完美，除了Chrome。在firefox和Internet Explorer中，它可以100％的工作，我可以坐下來刷新並且很好。在Chrome瀏覽器有時在頁面加載或刷新背景圖像似乎將右移50％？我剛做了一個快速測試，並且5/10次（一半的時間）它會在刷新時顯示右移。有沒有人有任何想法可能導致這種情況？

來源

2012-02-08 Draineh

停止使用

標記並使用div代替！ – 2012-02-08 15:32:20

確實使用'position：absolute'有所作爲？ – jurgemaister 2012-02-08 15:37:41

謝謝。我會改變div，我的壞的複製和粘貼從一些舊的代碼：P改變爲絕對沒有任何區別的問題 – Draineh 2012-02-10 12:29:54

假設您的前景和背景圖像的大小相同，它好像你正在試圖做到這一點：

<img id="foreground" style="margin-left:auto; margin-right:auto; background:url(&quot;background.png&quot;);" src="foreground.png" usemap="#map"/>

的margin-left:auto; margin-right:auto;將其父元素中居中的圖像。

來源

2012-02-15 10:58:46 wecsam

謝謝，這將是一個更明智的方法來解決這個問題！ – Draineh 2012-02-15 11:04:56

查看http://www.w3schools.com/css/css_background.asp瞭解更多關於CSS背景的信息。 – wecsam 2012-02-15 11:10:00

Chrome和Firefox之間的圖像定位不同

回答

相關問題