border-collapse与table td边框opacity透明度诡异解析
一、原来不是bug
年前遇到此现象，在Chrome浏览器下，起初，我还以为是Chrome浏览器的bug.
今日原型重现，在各个现代浏览器下一测，乖乖隆地咚，都是一个尿性，看来是规范使然，不是bug啊！但是，由于现象实在诡异，到目前也想不通是个怎么回事，故在这里演示并询问在座的小伙伴们，为什么会有此现象？
现象描述
一个普普通通的 table ，设置了 border-collapse:collapse ，合并表格的边框，这很正常，也很常见。
我们给元素设置 opacity 透明度值，例如 0.1 ，则元素应该透明度就变成 10% ，包括边框、背景色等，这也符合我们的理解，很正常。
但是，两者搞在一起，就出现了诡异解析。表格元素如 <td> 边框透明度似乎是 100% 透明度减去 <td> 定义的透明度值的差值( opacity:1 除外)！也就是 <td> 设置透明度10%，则边框却是90%的透明度；而 <td> 设置透明度90%，边框却是 10% 的透明度。
文字描述太苍白，我们还是看实例吧(IE10+, FireFox, Chrome均可)~
您可以狠狠地点击这里： border-collapse与边框透明度解析demo
默认我们的 <tbody> (便于演示， <td> 效果一样) opacity 值为，于是，我们看到了一片和谐的效果：
但是，我们拖动Demo页面上的 range 控件，修改 <tbody> 的透明度 opacity 属性值，结果，你会发现， <tbody> 透明度为 90% 的时候，我了个擦，边框直接透明度（肉眼看上去）就是 10% 透明度的样子。
Chrome浏览器下，最后一行单元格的边框似乎不受 opacity 的影响，如下截图：
而FireFox浏览器下，则是所有边框都会差异半透明化：
然后，我们继续拖动，差不多 10% 透明度的样子时候，此时，文字是规规矩矩透明了，但是，边框的颜色却反而愈发地清晰起来！！
连IE浏览器也不甘落后：
二、造成的问题
我想使用CSS3实现一个淡入淡出的动画，那效果，诡异如坐针毡！
三、如何避免此尴尬
一般实际开发时候，我们使用的 table 边框是单边框，不是那种格子之类，此时，我们可以：
只对低版本的IE浏览器使用 border-collapse:collapse ；对于高级浏览器，删除 border-collapse:collapse 声明，或者使用 separate 重置，然后使用 border-spacing:0 去除单元格见你不想要的空白。
于是，透明度就符合正常认知地渲染了！
四、为何border-collapse:collapse时候边框透明度渲染诡异呢？
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址： http://www.zhangxinxu.com/wordpress/?p=4650
（本篇完）
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
