检测带有边框半径的溢出错误特征

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，我使用背景图像作为备选方案，但只有在溢出无法正常工作的情况下才使用它。现在，我不想仅仅使用浏览器检测来判断，因为有已知的原因，我想要进行特性检测以正确地截断角落。通常我会像这样检查：

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

但这不会有帮助...那么，有没有正确检查的方法呢？

- AvL

---

无法检查此问题。这不是您试图检测的功能，而是一个深层次的错误。您无法“询问”浏览器是否存在该错误。您可以与其交互的部分并不知道它。 - Rudie

+1，感谢介绍我认识placekitten！ - Lowkase

为什么不给 img 也加上 border-radius 呢？你甚至可以将边框添加到 img 而不是其父元素。 - Rudie

正如你在我的评论中所看到的jsfiddle，我想在“mouseover”时调整a容器的大小，并在稍后“超大尺寸”恢复到图像的原始尺寸 - 就像缩略图一样，你可以点击查看全部内容。因此，a内部的图像必须比容器更大。我正在研究一个解决方法 - 也许我以后会发布它... - AvL

你仍然可以通过给img和a添加边框半径来实现。甚至可以使用clip而不需要a。（如果clip转换，我不确定。） - Rudie

Answer 1

为什么不使用CSS hack？

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

}

我相信这将针对Safari和Opera浏览器。

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

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

Opera还具有供应商CSS选择器，我认为这更安全:

x:-o-prefocus {
}

- user1721135