Firefox轮廓CSS属性与Chrome不同 [英] Firefox outline css property works different than Chrome

问题描述

我正在使用CSS大纲属性，并且我发现如果后代元素在外面，Chrome和Firefox之间的工作方式会有所不同。
$ b

在Chrome中，轮廓仅适用于自己的范围，即使任何后代元素都在本身区域之外。

• ，轮廓是所有范围，包括所有的后裔元素。
  

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

以获得与Chrome相同的轮廓效果。

当然，我知道关于border或box-shadow，但是由于某些其他原因，我无法使用边框。因为有时div有半径边框，在这个时候border或box-shadow是半径，但它应该有矩形轮廓，所以我们不能使用border或box-shadow。

我该如何做到这一点？

解决方案

试试这段代码，我用border代替了大纲

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

这里是小提琴

https://jsfiddle.net/0pr1t07y/

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?

解决方案

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/

这篇关于Firefox轮廓CSS属性与Chrome不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！