好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

html5教程-border-collapse与table td边框opacity透明度诡异解析

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

&nbs p;

一、原来不是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 值为 1 ,于是,我们看到了一片和谐的效果:

但是,我们拖动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时候边框透明度渲染诡异呢?

(本篇完)

觉得可用,就经常来吧! 欢迎评论哦!  html5教程 ,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是 为你收集整理的 html5教程-border-collapse与table td边框opacity透明度诡异解析 全部内容,希望文章能够帮你解决 html5教程-border-collapse与table td边框opacity透明度诡异解析 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于html5教程-border-collapse与table td边框opacity透明度诡异解析的详细内容...

  阅读:64次