我在codepen上面放了测试代码:
http://codepen.io/fonglezen/pen/gpOreQ
outline在firefox和chrome的表现不同。
chrome的outline是元素盒子的宽高,
但是firefox的是,在所有元素的最外围!
问:有没有什么hack方法,让firefox的outline的表现和chrome的一致!!
需要不占布局的边框?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
为什么不使用border?
是否使用border可以很好的实现你的需求哪?
#main{
width:150px; height:150px; position:relative; margin:50px;
border:1px solid #009fee;//这里修改为border
}
如果实在需要使用outline
那么可能需要嵌套div开解决这个问题。(如果border不行的话,继续追加代码)
针对 Firefox 使用 outline-offset 属性来实现~