Firefox box-shadow выполняет по-разному

Я пытаюсь получить эффект «заполненных» строк переменной длины в диапазоне, используя следующий css. Мы не знаем, каково будет содержание линий.Firefox box-shadow выполняет по-разному

Вы можете увидеть эффект здесь:

#container{ 
 
    width:300px; 
 
    margin:0 auto; 
 
    background-color:#ccc; 
 
    height:100px; 
 
    padding:20px; 
 
} 
 

 
.text{ 
 
    max-width:250px; 
 
} 
 

 
span{ 
 
    max-width:250px; 
 
    background-color: #FF8E1B; 
 
    box-shadow: 10px 0 0 #FF8E1B,-10px 0 0 #FF8E1B; 
 
    -moz-box-shadow: 10px 0 0 #FF8E1B,-10px 0 0 #FF8E1B; 
 
    -webkit-box-shadow: 10px 0 0 #FF8E1B,-10px 0 0 #FF8E1B; 
 
    display: inline; 
 
    padding: 1px 0; 
 
    font-size: 14px; 
 
    line-height: 22px; 
 
    letter-spacing: .28px; 
 
    font-weight: 100; 
 
    color:#fff; 
 
}

<div id="container"> 
 
    <div class="text"> 
 
    <span> 
 
     Hello World Hello World Hello World 
 
     Hello World Hello World Hello<br> 
 
     Hello World Hello World Hello World 
 
    </span> 
 
    </div> 
 
</div>

В Firefox (протестировано только в 42), она применяется только бокс-тень на первую и последнюю строку. В каждом другом браузере он применяет тень для каждой строки.

1) Это ошибка в Firefox? Должен ли я отправлять отчет об ошибке в Mozilla?

2) Есть ли способ исправить тот или иной способ получить этот эффект при заданных ограничениях?

источник

2016-01-14 James G.

Возможный дубликат [? Можно ли создать окно-эффект тени для встроенного текста] (http://stackoverflow.com/questions/26062154/is-it-possible- to-create-box-shadow-effect-for-inline-text) –

Это, конечно, не дубликат, но этот вопрос отвечает на вторую часть моего вопроса, поэтому я не собираюсь его оспаривать. –

Я не считаю это ошибкой. В разных браузерах по-разному отображаются дополнения и поля, и это, скорее всего, способ, которым Mozilla считает лучше. Если вы хотите, чтобы выглядеть в соответствии с Chrome, вы можете добавить продолжительность каждой линии, как этот

<span>Hello World Hello World Hello World</span> 
<span>Hello World Hello World Hello<br></span> 
<span>Hello World Hello World Hello World</span>

источник

2016-01-14 00:26:42 Stormy

У нас, к сожалению, нет контроля над контентом. –

Firefox делает это правильно, так как у вас есть только один <span></span>. В редакторе codepen (или любом другом, если на то пошло) любое количество текстовых строк будет рассматриваться как одна длинная строка (даже если добавлено <br> или тому подобное, как в вашем примере). Таким образом, коробочная тень в начале/конце этой строки является единственным правильным выходом. Ура для FF.

BTW: IE11, CH и FF используют webkit (в любом случае, в любом случае), где FF является наиболее совместимым с W3C.

источник

2016-01-14 03:50:56

Ответ на вопрос this question отвечает на часть 2 моего вопроса, для тех, кто ищет решение этой проблемы. Эти линии УСС требуются:

-webkit-box-decoration-break: clone; 
    -ms-box-decoration-break: clone; 
    -o-box-decoration-break: clone; 
    box-decoration-break: clone;

источник

2016-01-14 16:41:21

Firefox box-shadow выполняет по-разному

ответ

Смежные вопросы