Firefox outline css property works different than Chrome [duplicate]

问题

I am working with css outline property, and I found that it is working differently between Chrome and Firefox if descendant elements are outside.

in Chrome, outline is only for itself range, even though any descendant elements are outside of itself area.

in Firefox, outline is all range including all descendant elements.

<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>

I want Firefox to get same outline effect than Chrome.

Of course i know about border or box-shadow, but i can't use border now for some other reason. Because sometimes div has radius border, in this time border or box-shadow is radius, but it should have rectangular outline, so we can't use border or box-shadow.

How can I do this?

回答1:

try this add display:inline-table;

<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>

回答2:

try this code i replaced outline with border

<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>

here is the fiddle

https://jsfiddle.net/0pr1t07y/

来源：https://stackoverflow.com/questions/49165863/firefox-outline-css-property-works-different-than-chrome

标签

css