Chrome下的Border合并BUG网页设计 -电脑资料

电脑资料 时间:2019-01-01 我要投稿
【www.unjs.com - 电脑资料】

   

当时的需求是这样的:

    表格第一列显示日期,文字垂直居中;表格行数不确定;使用虚线分割

    使用Chrome 14.0.835.35 测试,表现如下:

   

    点我看Demo

    行数不确定,需要垂直居中,自然就用了table套table,

Chrome下的Border合并BUG网页设计

电脑资料

Chrome下的Border合并BUG网页设计》(https://www.unjs.com)。

    在Chrome下诡异的事情发生了,日期上下出现了实线。只有在Chrome能看到哦,Safari下也木有哦~

    当时试了很多很多方法来写border,无论怎么写,还是会出现同样的问题。

小结

    Chrome在border合并时,有点碰运气的感觉,两条虚线正好交错在一起时会合成一条实线。

    Demo中table的宽度是886px,增加1px或者减少1px都可以解决这个问题。

    有兴趣的童鞋还可以试着不断增加宽度,观察border交错时的变化,你会发现它6个像素为一个周期。

最新文章