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

放点代码吧，要不然没说服力。测试代码仅用来说明问题，且不是完整代码，需要看完整代码的请点击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，不过也不是什么好办法，欢迎有办法的同学一起探讨。