border-radius元素的可选区域不一致 [英] Inconsistent selectable area of elements with border-radius

问题描述

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 时，仍然可以点击四舍五入的区域。

---

img

When border-radius is applied on an image, the areas that got rounded off can still be clicked on. If you click on and drag the area just outside the circle, you will see it's possible.

如果您点击并拖动圆圈外面的区域，但是，当将 border-radius 应用于 div 时，四舍五入的区域不是 div ，它确实是一个圆圈。

However, when you apply border-radius to a div, the rounded off areas are not part of the div and it is truly a circle.

img 但 object 和视频太多（感谢web-tiki的评论）。为什么 border-radius 不适用于这些元素？是否有一个标准指定哪个是正确的行为？

It appears this applies not only to img but to object and video too (thanks to web-tiki's comment). Why does border-radius not apply to these elements? Is there a standard which specifies which is the correct behaviour?

推荐答案

c> border-radius 不适用于这些元素？

基于WebKit的浏览器有问题 border-radius 和替换元素，例如 img ， object 和视频元素。我不清楚为什么它不会发生与某些其他替换的元素，如表单元素，但替换的元素通常是大多数浏览器的一个粘结点。

WebKit-based browsers are known to have issues surrounding border-radius and replaced elements such as img, object and video elements. It's not clear to me why it doesn't happen with certain other replaced elements such as form elements, but replaced elements are generally a sticking point with most browsers.

历史上，一些浏览器未能在视觉上剪裁内容，就像 border-radius 完全没有效果。似乎最近的WebKit / Blink版本纠正了这一点，但不是完全。

Historically, some browsers failed to clip the content visually, as though border-radius had absolutely no effect. It seems that recent versions of WebKit/Blink rectify this, but not completely.

有没有一个标准，规定哪个是正确的行为？

Is there a standard which specifies which is the correct behaviour?

正确的行为是被替换的内容应该被修剪 border-radius ，并且剪裁区域上的任何指针事件不能由剪裁的内容处理。 背景与影片的第5.3节的前两个段落，边界非常明确地陈述这一点。

The correct behavior is that replaced content should be clipped by border-radius, and that any pointer events on the clipped area must not be handled by the content that is clipped. The first two paragraphs of section 5.3 of Backgrounds & Borders state this very explicitly.

如果Chris Coyier在他的声明，替换的内容忽略剪辑，因为它是剪辑的容器，而不是内容（实际上是 overflow：visible 的未替换元素的预期行为）违反规范，因此可视为错误。

If Chris Coyier is correct in his claim that the replaced content is ignoring the clipping because it's the container being clipped and not the content (which is actually the expected behavior for non-replaced elements with overflow: visible), then that is a spec violation and can therefore be considered a bug.

这篇关于border-radius元素的可选区域不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！