西门的后花园

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

解决火狐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等格式都可以。

评论列表

  1. 实用,虽然我还没有用到,感觉不错,不定哪天会有用!

  2. 还没遇到过这问题,不过这工具好顶赞啊 🙄

  3. Firefox有时候会有各种意想不到的问题

  4. 也喜欢火狐的飘过

    火狐还能把一些网站所谓的禁复制功能给屏蔽

  5. 自豪的使用Opera,哈哈。

  6. 我觉得还是使用图片吧,如果border-color设置为transparent ff下边缘会有条小细线,我一般都用背景色- -,必须透明的话我就使用其它方法了。

  7. 博主这域名好短呀。

  8. 又是一个周一,年底肯定很忙,再坚持坚持吧。祝工作顺利,一切顺心。

  9. 😮 前来撸一发

  10. mark一下,以后注意。
    上个月就遇到三角的问题,我就喜欢用CSS来拼图…隔壁的妹子喜欢切图…

  11. 这个红色三角裤不容易被浏览器穿。。。

  12. 都是用现成图片的

  13. 我是来吐槽的

    火狐有看起来这样那样不错的插件,但貌似随着版本升级,有些插件都慢慢不能用了,实在是讨厌

  14. 不经常使用火狐浏览器,不过,也来关注下。

  15. 竟然还有这个问题。我一直是在chrome下开发的

  16. 今天最后一次更新网站,也感谢您在2013年的访问,希望2014年网站发展更好,祝春节愉快!

  17. 怎么又是IE6呢

  18. 我同事就吐槽过我用css三角,说在火狐下有问题…我也没深究是啥问题。

  19. 总感觉放太多空标签怪怪的

发表评论

分类目录