鉻 - 含div有圓角CSS中，而不是渲染爲圓

.rounded { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

我的網站上我的工作，http://urlme.cc/movies6，如果你認爲它Chrome中，每個電影div都有「圓形」類，但div具有直線邊緣。

在Firefox中，它四捨五入正確。請參閱下面的圖片比較。

您可以查看源/上面的鏈接檢查的元素，但是，在html基本上是這樣的：

<div class="movie rounded"> 
    <a href="#"><img src="..." /></a> 
    <div class="details">1 hr, 20 min</div> 
</div>

Chrome vs. Firefox comparison of rounded corners

問題：任何理由瀏覽器未四捨五入的DIV .movie的角落，而Firefox是？謝謝！

2012-02-08 Ian Davis

基於提供的最小片段，它應該表現得很好。由於您使用的是Chrome，您是否嘗試使用「檢查元素」工具來查看正在應用哪些樣式？不可思議的是，你的邊界半徑被競爭的風格所覆蓋。 – 2012-02-08 18:16:51

這是一件小事，但一定要先訂購帶有供應商前綴版本（例如-moz-border-radius）的邊框半徑規則，然後是非前綴版本。隨着瀏覽器鞏固對屬性的支持，並放棄對前綴的需求，未加前綴的規則將會贏。 – chipcullen 2012-02-08 18:32:52

在上起飛position:relative .movie似乎在Chrome開發人員工具中執行此操作。

2012-02-08 18:26:24 Drew

謝謝！你知道爲什麼這會造成差異嗎？ – 2012-02-08 18:54:37

回答