Свойство CSS структуры Firefox работает иначе, чем Chrome

Я работаю со свойством структуры css и обнаружил, что оно работает по-разному между Chrome и Firefox, если элементы-потомки находятся снаружи.

  • в Chrome контур предназначен только для самого диапазона, даже если любые дочерние элементы находятся за пределами его области.

результаты в хроме: синий прямоугольник имеет контур, потомок зеленого прямоугольника не имеет

  • в Firefox контур — это весь диапазон, включая все дочерние элементы. результаты в 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 есть граница радиуса, в этом случае граница или тень блока являются радиусом, но он должен иметь прямоугольный контур, поэтому мы не можем использовать границу или тень блока.

Как я могу это сделать?


google-chrome css firefox descendant outline
person LarAng    schedule 08.03.2018    source источник
comment
Это известная FF ошибка*. .. 7 лет назад. (* Ну, текущие спецификации говорят, что они разрешают это разработчикам, так ли это точно баг?)   -  person Kaiido    schedule 08.03.2018
comment
@Kaiido, спасибо за ответ, значит, решение — это box-shadow?   -  person LarAng    schedule 08.03.2018
comment
Что ж, если это приемлемо для вас, то да, вы можете использовать box-shadow в качестве обходного пути. (но без другого стиля, кроме solid...)   -  person Kaiido    schedule 08.03.2018
comment
@Kaiido, спасибо, но теперь я не могу использовать box-shadow, Div может взять свойство границы радиуса. В этом случае box-shadow — это радиус, но я хочу прямоугольный контур.   -  person LarAng    schedule 08.03.2018

Ответы (2)


arrow_upward
0
arrow_downward

попробуйте добавить 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>

person Rajath Kumar PM    schedule 08.03.2018
comment
Спасибо за ваш ответ, он выглядит работающим, но теперь я не могу использовать свойство display: inline-table.... - person LarAng; 08.03.2018
comment
в чем проблема с свойством display: inline-table? - person Rajath Kumar PM; 08.03.2018
comment
теперь я ввел простой код для показа, но на самом деле внутри div есть много содержимого, оно должно отображать свойство: block. - person LarAng; 08.03.2018

arrow_upward
0
arrow_downward

попробуйте этот код, я заменил контур рамкой

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

person Shaik    schedule 08.03.2018
comment
Спасибо за ваш ответ. я не могу использовать границу, потому что иногда div имеет радиусную границу, но он должен иметь прямоугольный контур. - person LarAng; 08.03.2018
comment
вы также можете применить радиус границы - person Shaik; 08.03.2018
comment
я имею в виду, что наш контур должен быть прямоугольником, даже если установлен радиус границы. - person LarAng; 08.03.2018
comment
я обновил свой ответ с небольшими изменениями. см. эту скрипту jsfiddle.net/sLk4550q/13 - person Shaik; 08.03.2018
comment
Спасибо, но когда родительская позиция div не является «относительной», этого не происходит. - person LarAng; 08.03.2018
comment
хорошо, наконец, посмотрите, это очень полезно для вас, я думаю jsfiddle.net/8kzcrvc5/3 - person Shaik; 08.03.2018
comment
Давайте продолжим обсуждение в чате. - person Shaik; 08.03.2018
comment
Спасибо, но это произошло, когда какой-либо элемент-потомок содержится в родительском div, который устанавливает структуру. - person LarAng; 08.03.2018