Firefox outline css property works different than Chrome

Question

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?

This is a know [FF *bug**](https://bugzilla.mozilla.org/show_bug.cgi?id=687311) reported... 7 years ago. (* Well [current specs](https://drafts.csswg.org/css-ui/#outline-props) say they let this to implementors, so is it really a bug?) — Kaiido, Mar 08 '18 at 05:45
@Kaiido, thanks for your response, so the solution is box-shadow? — LarAng, Mar 08 '18 at 06:27
Well if it is viable for you, then yes, you can use box-shadow as a workaround. (but with no other style than `solid`...) — Kaiido, Mar 08 '18 at 06:32
@Kaiido, thanks, but now i can't use box-shadow, Div can take radius border property. In this case, box-shadow is radius, but i want rectangular outline. — LarAng, Mar 08 '18 at 06:45

score 0 · Answer 1 · answered Mar 08 '18 at 05:17

0

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>

answered Mar 08 '18 at 05:17

Rajath Kumar PM

655
3
9

Thanks for your response, it looks working, but now i can't use display: inline-table property.... – LarAng Mar 08 '18 at 06:30
what is the problem with display: inline-table property ? – Rajath Kumar PM Mar 08 '18 at 06:33
now i have inputed simple code for show, but actually div has some many contents inside, it should property display: block. – LarAng Mar 08 '18 at 06:43

score 0 · Answer 2 · answered Mar 08 '18 at 05:18

0

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/

answered Mar 08 '18 at 05:18

Shaik

380
2
15

Thanks for your response. i can't use border, because sometimes div has radius border, but it should have rectangular outline. – LarAng Mar 08 '18 at 06:25
you can apply border-radius also – Shaik Mar 08 '18 at 07:29
i mean our outline should be rectangle even though border radius set. – LarAng Mar 08 '18 at 08:02
i updated my answer with small changes . see this fiddle https://jsfiddle.net/sLk4550q/13/ – Shaik Mar 08 '18 at 08:29
Thanks, but when parent div position is not 'relative', it does not happen. – LarAng Mar 08 '18 at 09:55
ok, Finally see this it is very helpful to you i think https://jsfiddle.net/8kzcrvc5/3/ – Shaik Mar 08 '18 at 10:01
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166451/discussion-between-shaik-and-alex). – Shaik Mar 08 '18 at 10:04
Thanks, but this happend when any descendant element is contained in parent div that set outline. – LarAng Mar 08 '18 at 10:05

Firefox outline css property works different than Chrome

2 Answers2

Linked