具有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-radius应用于div时，舍入区域不属于div，而且它实际上是一个圆圈。

---

这似乎不仅适用于img but to object and video too（感谢web-tiki的评论）。为什么border-radius不适用于这些元素？是否有一个标准指定哪个是正确的行为？

Answer 1

  

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

基于WebKit的浏览器存在围绕border-radius和replaced elements的问题，例如img，object和video元素。我不清楚为什么它与某些其他替换元素（如表单元素）不会发生，但替换元素通常是大多数浏览器的关键点。

历史上，有些浏览器无法直观地剪辑内容，好像border-radius完全没有效果。似乎最近版本的WebKit / Blink纠正了这一点，但并非完全正确。

  

是否有标准指明哪种行为正确？

正确的行为是被替换的内容应该被border-radius剪切，并且剪切区域上的任何指针事件都不能被剪切的内容处理。 section 5.3 of Backgrounds & Borders的前两段非常清楚地说明了这一点。

如果Chris Coyier在his claim中是正确的，被替换的内容忽略了裁剪，因为它是被裁剪的容器而不是内容（实际上是the expected behavior for non-replaced elements with overflow: visible），那就是规范违规，因此可以被视为错误。

Answer 2

对此的解决方案可能很简单，只需在元素上设置user-drag：none即可。