铬 - 含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

回答