firefox和chrome的outline表现不同

Question

我在codepen上面放了测试代码：
http://codepen.io/fonglezen/pen/gpOreQ

outline在firefox和chrome的表现不同。

chrome的outline是元素盒子的宽高，
但是firefox的是，在所有元素的最外围！

问：有没有什么hack方法，让firefox的outline的表现和chrome的一致！！

Answer 1

需要不占布局的边框?
box-shadow 就可以
Try this:

#main {
    width: 150px;
    height: 150px;
    position: relative;
    margin: 50px;
    box-shadow: 0 0 0 1px #009fee;
}

http://codepen.io/anon/pen/KpKgXx

Answer 2

为什么不使用border？

是否使用border可以很好的实现你的需求哪？

#main{
width:150px; height:150px; position:relative; margin:50px; 
border:1px solid #009fee;//这里修改为border
}

如果实在需要使用outline

那么可能需要嵌套div开解决这个问题。(如果border不行的话，继续追加代码)

Answer 3

针对 Firefox 使用 outline-offset 属性来实现~