Webkit/Firefox - 圖像的絕對位置

我在webkit-browsers和firefox中定位了一些元素。

在Safari /鉻，它看起來像我希望它是：

enter image description here

但在Firefox，它看起來像這樣：

enter image description here

代碼

HTML

<ul> 
    <li> 
    <div class="img"> 
     <a href="#"> 
     <img src="#" /> 
     <p><span class="circle"><img src="white-circle.png" alt="" /></span></p> 
     </a> 
    </div> 
    </li> 
</ul>

CSS

li { 
    position: relative; 
} 

p { 
    top: 0; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    text-align: center; 
    background-color: black; 
} 

p img { 
    width: 70%; 
    height: 70%; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -35%; 
    margin-left: -35%; 
}

任何想法是怎麼回事呢？ Firefox是否以不同的方式解釋position: absolute？

來源

2013-01-12 Sven

我已經在Firefox中測試過，它也可以工作。 – ijo

不想在這裏粗魯或冒犯所以不要誤會，但是這個html有點恐怖，空的圖像標籤？一個p和跨度的圖像？爲什麼一個div圍繞它呢，爲什麼你不給班裏的李？一切都在precent，難怪瀏覽器不能正確渲染 –

@LeventeNagy當然你是對的，但請記住，這只是一個例子。我可能過於簡單化了，是的。 – Sven

顯然，其他一些混亂的CSS規則在那裏工作。作爲一個臨時修復，我使用this guide來查找在Firefox中工作的解決方案。
也許這是一些影響所有圖像的規則，但我現在無法找到它。

來源

2013-01-12 17:21:26 Sven

使用！重要可覆蓋這些樣式 – JalalJaberi

當然，您給節點的更具體的樣式會覆蓋更多公共的樣式。那麼，一定不會有問題。 – JalalJaberi

當您使用絕對定位時，Firefox似乎總是將不同的事情移到Chrome和Safari上。我的意見是

p img:{position: relative;}

（相對位置很好，只有當我用絕對）。

好運

來源

2013-01-12 17:25:31 Venkat

Webkit/Firefox - 圖像的絕對位置

回答

相關問題