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

Question

正如我们所知，overflow: hidden 与 border-radius 的结合并不能在所有浏览器中正常工作——即 Safari 和 Opera 在切掉圆 Angular 方面存在问题包含图像。

示例 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 ，但我想特征检测以正确的方式切掉 Angular 落的能力。通常我会这样检查:

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

但是这一次也无济于事了...那么，有什么办法可以正确检查吗？

Answer 1

为什么不用 css hack？

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

}

我相信这将针对 safari 和 opera。

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

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

Opera 也有 vendor css 选择器，我觉得更安全:

x:-o-prefocus {
}