Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

collapse 的 border 样式如何计算?

  在使用 table 时,大多数情况我都会同时使用 border-collapse。一般 UI 设计会让单元格之间边框的样式都统一,所以一直以来都没遇到什么问题。但是最近的一个需求是让单元格之间的边框有不同样式,于是我就开始纠结了,这被 collapse 掉的 border 是如何计算覆盖关系的呢?
  写个 demo 吧?先放 4 个单元格,并且对它们设置不同颜色的边框:
<!DOCTYPE html> <style> table { border-collapse: collapse; } td { border: 20px solid; padding: 10px; } .td1 { border-color: red; } .td2 { border-color: green; } .td3 { border-color: blue; } .td4 { border-color: gold; } </style> <table> <tr> <td class="td1"></td> <td class="td2"></td> </tr> <tr> <td class="td3"></td> <td class="td4"></td> </tr> </table>
  Chrome 的比较好理解左边的覆盖右边的、上面的覆盖下面的。到了 Firefox 上就变得奇奇怪怪,但如果仔细看就会发现,对于「边」的计算还是和 Chrome 一样的,只不过「角」的计算有点奇怪而已。如果是 1px 的边框,其实我们根本不会去在意「角」的计算方式。所以如果不是一些奇怪的用途(比如用 border 来画三角形)是不会踩到坑的。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^