Firefox outline css属性与Chrome不同

Question

我正在使用css outline属性，如果后代元素在外部，我发现它在Chrome和Firefox之间的工作方式不同。

• 在Chrome中，outline仅适用于自己的范围，即使任何子代元素都在其自身区域之外。

​

​

• 在Firefox中，outline是包含所有子代元素的所有范围。

​

​

<div style="
    margin: 100px;
    width:  100px;
    height:  100px;
    background: blue;
    outline: solid 1px red;
    position:  relative;">
  <div style="
        width: 100px;
        height: 100px;
        background:  green;
        position: absolute;
        left:  50px;
        top: 50px;">
  </div>
</div>

​

我希望Firefox获得与Chrome相同的轮廓效果。

当然，我知道边框或框影，但由于其他原因，我现在不能使用边框。因为有时候div有半径边界，在这个时候边框或框影是半径，但是它应该有矩形轮廓，所以我们不能使用边框或框影。

我该怎么做？

Answer 1

试着添加显示:内联表；

​

<div style="
margin: 100px;
width:  100px;
height:  100px;
background: blue;
outline: solid 1px red;
position:  relative;
display: inline-table;">
    <div style="
    width: 100px;
    height: 100px;
    background:  green;
    position: absolute;
    left:  50px;
    top: 50px;">
    </div>

​