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

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运行不正常的情况下使用它。现在，由于已知原因，我不想简单地使用浏览器检测，但我想检测以正确方式切断角落的能力。通常我会这样检查：

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

但这一次将无济于事……那么，有什么方法可以正确检查吗？

Answer 1

为什么不用css hack？

@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/

Opera 也有供应商 css 选择器，这在 imo 中更安全：

x:-o-prefocus {
}