你的位置:快乐忆站 \ 前端 \ 文章正文

Firefox outline&box-shadow貌似有bug

这几天一直在折腾博客,而且是狠狠地折腾,基本上换了一个板式,舍弃了圆角,舍弃了虚线,视觉疲劳让我看到圆角有点想吐的感觉,话说主题已经很久没有折腾了。。。这次趁着中秋放假大大地折腾了一回,感觉好爽好爽~~~其实我一直觉得折腾对于一个前端来说是提高和发现问题的一种方式,比如说今天的这个问题就是在折腾中无意间发现的。

放点代码吧,要不然没说服力。测试代码仅用来说明问题,且不是完整代码,需要看完整代码的请点击demo后通过开发者工具查看。

<style type="text/css">
#box{
	margin:50px auto;
	width:150px;
	height:150px;
	border:2px solid #00f;
	outline:5px solid #0f0;
	box-shadow: 0 0 30px #000;
}	
</style>
<div id="box">有阴影,有外边框,还有边框,注意观察Firefox和Chrome的不同</div>

Chrome下显示截图:

Firefox下显示截图: 

很明显,Firefox下绿色的外边框大很多,他包含了阴影的宽度,导致外边框被撑大了,而非Firefox浏览器则显示正常,特别的,IE9也显示正常。

谷歌了一下,发现一篇文章,http://liunian.info/firefox-outline-boxshadow-bug.html,这位仁兄很早就发现了这个bug,貌似也没啥特别的解决方法,希望Firefox能在以后的版本中修复这个bug,虽然很少会碰到,但是至少我碰到了~目前我的办法就是针对Firefox写hack,将outline设为none,不过也不是什么好办法,欢迎有办法的同学一起探讨。

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 32#
    踏雪残情
    踏雪残情 2011-10-10 12:17 回复
    我这边火狐3.6看不到阴影。。。
    火狐更新太快了,现在都要7了,我还是喜欢用3
    小松
    小松 2011-10-10 12:29 回复
    @踏雪残情:火狐3.6估计不支持box-shadow,只支持-moz-box-shadow。。。
  2. 31#
    小松
    小松 2011-10-05 11:55 回复
    直接线上测试~
  3. 30#
    标签打印机
    标签打印机 2011-09-17 10:02 回复
    这个是计算机专业的 不太懂啊
  4. 29#
    hostgator
    hostgator 2011-09-16 16:04 回复
    博主辛苦了。学习一下
  5. 28#
    保健品
    保健品 2011-09-16 14:25 回复
    呵呵呵  不错 博主啊 支持你
  6. 27#
    箴言
    箴言 2011-09-16 03:08 回复
    又换了模版?我真的懒了?
    小松
    小松 2011-09-16 09:02 回复
    @箴言:改进,没换,哈哈
  7. 26#
    ixwebhosting
    ixwebhosting 2011-09-15 15:21 回复
    是什么意思,我没看懂
  8. 25#
    抢客网
    抢客网 2011-09-15 12:45 回复
    过来了解一下  支持博主
  9. 24#
    b2b平台
    b2b平台 2011-09-15 11:46 回复
    过来转转 留脚印了
  10. 23#
    金顺道物流
    金顺道物流 2011-09-15 11:20 回复
    支持下博主!
1 2 3 4

随机日志:

推荐日志:

彩色标签:

sitemap