功能检测不正确的溢出与边界半径

Question

我们知道overflow: hidden结合border-radius不适用于所有浏览器，因为它应该 - 即Safari和Opera有问题切割包含图像的圆角。

示例HTML：

<a class="circle" href="#"> 
    <img src="http://placekitten.com/300/300" alt="kitten" /> 
</a> 

和相应的CSS：

.circle { 
    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    border-radius: 100px; 
    height: 120px; 
    overflow: hidden; 
    width: 120px; 
} 

检查这个jsfiddle

我有一个后备的Safari和Opera使用背景图像，但我只有在使用overflow时效果不佳。现在，我不想简单地使用浏览器检测known reasons，但我想功能检测的能力，以正确的方式切断角落。通常我会检查这样的：

if('overflow' in document.body.style){ 
    // overflow 
} else { 
    // no overflow 
} 

但是，这将不利于这个时候......那么，有没有什么办法可以正确地检查呢？

Answer 1

为什么不css黑客？

@media screen and (-webkit-min-device-pixel-ratio:0) { 

} 

我相信这将瞄准野生动物园和歌剧。

是的，Chrome也是webkit。不，它不会受到影响。

烃源： http://css-tricks.com/is-there-any-dedicated-css-hacks-for-safari-or-opera/

歌剧也有厂商CSS选择器IMO更安全：

x:-o-prefocus { 
}