西门的后花园

一个热爱网络的年轻人的博客

解决火狐Firefox 26显示用border实现箭头的bug

话说那天同事的项目里箭头bug,不小心被leader看到了,然后追溯根源的时候,是copy我做的代码(满头黑线)。我检查了下我的项目,基本上所有箭头都沦陷了。因为实现箭头,我喜欢用空标签border的写法,同事喜欢切图,各有各的好吧。

然后发现,只有Firefox 26有问题,Firefox 25没问题,其他浏览器也没问题,那么问题就锁定到Firefox 26身上了。网上正好有个朋友几天前写过→这个←,他居然以为是升级显卡的问题(再次黑线)。

下面是我随便写的几个border宽度不一样的箭头例子对比,Firefox 26显示很怪异,具体为什么,我也不知道。

火狐Firefox26显示用border实现箭头的bug

我测试了下,是因为border-style:dashed造成的,border-style:solid就没事。如果用border-style:solid的话,IE6下面就是黑色的,所以以前用border-style:dashed来全兼容。那么现在只能针对IE6写hack了。border:10px solid transparent;_border-style:dashed;虽然很淫荡,但总能解决问题,而且全兼容。

另外,很早就写了个小工具→三角形制作工具←希望对大家工作学习有帮助。

用法很简单,如果你是Chrome,颜色自动填充了,直接输入边框大小数字即可,例如10。如果是其他浏览器,还需要填写颜色,#ffff00、#ff0、red等格式都可以。

评论已关闭

分类目录