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

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 选择器，在我看来更安全：

x:-o-prefocus {
}