那些CSS的细节问题(2)—— 圆角响应区


圆角边框是否影响元素的响应区域?

想象一下,一个 div 通常被我们认知为一个盒子(box),现在在它的周围有一个圆角边框,那么在这个矩形盒子的四个角上,必然会出现一些空隙(特别是当这个圆角矩形变成一个圆时候)。那么对于这个元素而言,那些空隙还是不是元素的一部分?

换个方式问,元素的响应区域,到底是原始盒模型的矩形区域,还是圆角边框所构成的圆形区域?当然,如果浏览器表现都一样,我恐怕也就不会提这种问题了。


具体情况如何,我们还是直接问浏览器吧!为了方便比对,最简单的方法就是用 :hover 伪类看鼠标的状态变化。我做了一个简单的 DEMO,你可以用不同浏览器查看结果。当然如果你懒得看的话,下面就是这个DEMO的两种结果: 

border radius response

  • 左边,响应区与圆角无关,鼠标状态在初始的box的范围里全都有变化。浏览器包括Chrome,Safari,Opera。

  • 右边,圆角外围的部分无响应,仅仅只有边框内部区域有效。但如果内部包含内容,并且内容在边框之外的话,也一样有效。浏览器包括Firefox,IE9

我测试使用的都是最新的浏览器,FF-17,Chrome-23,IE-9(很遗憾身边没有IE-10),Opera-12,Safari-5,现在,该相信谁呢?还是说,它们一个都不对?

如果是平常,我一定优先考虑Chrome和Firefox的结果,问题是,它们站在了对立面上。但就结果而言,我可能更容易接受Firefox的做法:以边框为界,圆角外的区域应当不作响应。试想,我总不能画一个圆而让这个圆的不可见的外接矩形作为交互区域吧?这多别扭!

既然浏览器各执一词,那就只能翻翻游戏规则了。没想到,W3C标准里居然非常明确地写明了这种情况:

Also, the area outside the curve of the border edge does not accept pointer events on behalf of the element.

呵呵,Chrome你个混球!看看你都干了神马!还把 Opera 也一起拖下水,Good Job~好欢乐啊~


水落石出了,换句话讲,border-radius 是会缩减响应区的,其圆角曲线外的那些空白区域是没有交互和响应的。也正因为此,标准特别提醒要作者注意圆角边框的元素的交互尺寸。而任何在在做怪应用而遇到这个问题的人,也完全不必去理会 Chrome 和 Opera,因为,这次真相掌握在了IE和Firefox手中!

PS:下篇那些CSS的细节问题,还是讲圆角,更加蛋疼的圆角麻烦问题还在后面呢~



今天画蓝胖子的时候在Safari浏览器上出现了一个比较严重的问题,就是圆角与隐藏区域的问题,于是网上搜索了一圈,找到这样两篇文章,收获不错,SO 转载

过来,以供日后参考


本文转载自:http://swordair.com/


版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将立即给予删除

转载请注明:文章转载自:全分享社区 「http://www.aweb.cc

本文标题:那些CSS的细节问题(2)—— 圆角响应区

本文地址:http://www.aweb.cc/article/detail/id/161.html

使用 HTML5 WebSocket 构 <<上一篇 下一篇>>那些CSS的细节问题(3) —— 圆角边