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 hacks？

@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 {
}

功能使用border-radius检测不正确的溢出

1 个答案: