具有border-radius的元素的可选区域不一致

Question

的jsfiddle

HTML

<div></div>
<img src="http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg">

CSS

body {
    background-color: blue;
}

div {
    background-image: url(http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg);
    background-size: cover;
}
div, img {
    width: 100px;
    height:100px;
    border-radius: 50%;
}

---

IMG

当border-radius应用于图像时,仍然可以单击已舍入的区域.如果您单击并拖动圆圈外的区域,您将看到它是可能的.

DIV

但是,当您应用于border-radiusa时div,圆角区域不是其中的一部分,div它实际上是一个圆圈.

---

看来这不仅适用于img 而是object和video太(感谢网络的tiki的评论).为什么border-radius不适用于这些元素？是否有一个标准指定哪个是正确的行为？

Answer 1

为什么不适border-radius用于这些元素？

众所周知，基于 WebKit 的浏览器存在围绕border-radius和替换元素（例如img、object和video元素）的问题。我不清楚为什么某些其他替换元素（例如表单元素）不会发生这种情况，但替换元素通常是大多数浏览器的症结所在。

从历史上看，一些浏览器未能在视觉上剪辑内容，就好像border-radius完全没有效果一样。最近版本的 WebKit/Blink 似乎纠正了这个问题，但并不完全。

是否有一个标准来指定哪种行为是正确的？

正确的行为是替换的内容应该被 剪裁border-radius，并且剪裁区域上的任何指针事件都不能由被剪裁的内容处理。背景和边框第 5.3 节的前两段非常明确地说明了这一点。

如果 Chris Coyier的说法是正确的，即被替换的内容会忽略剪切，因为剪切的是容器而不是内容（这实际上是带有 的非替换元素的预期行为overflow: visible），那么这是违反规范的，因此可以被视为错误。