Firefox大纲css属性与Chrome不同

Question

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

Chrome中的
• ，轮廓仅适用于自身范围，即使任何后代元素位于其自身区域之外。

在Firefox中
• ，大纲是包括所有后代元素在内的所有范围。

<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有半径边框，在这个时候边框或box-shadow是半径，但它应该有矩形轮廓，所以我们不能使用border或box-shadow。

我该怎么做？

Answer 1

试试这个添加display：inline-table;

＆＃13;

＆＃13;

var myItem = [Item]()

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这段代码我用边框替换了大纲

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

这里是小提琴

https://jsfiddle.net/0pr1t07y/