Разный выход для одного и того же размера тени в Chrome и Firefox

Почему размер box-shadow в Chrome и Firefox отличается?Разный выход для одного и того же размера тени в Chrome и Firefox

box-shadow: 0 0 4px #aaa inset;

Chrome:
enter image description here

Firefox:
enter image description here

Я уже попробовать следующее, но он не работает в последней Firefox.

-moz-box-shadow: 0 0 2px #aaa inset; 
-webkit-box-shadow: 0 0 4px #aaa inset;

Как я могу использовать кросс-браузерные тени одного размера?

источник

2012-06-23 Tooraj Jam

Это явно не сработает, если у вас есть неподписанная 'box-shadow' после двух префиксных версий ... – BoltClock

По причине * почему * результат отличается ... Я не знаю. – BoltClock

Можете ли вы поместить этот код в jsfiddle, чтобы мы могли редактировать и интерпретировать нашу систему тоже> –

w3schools says there are 6 values to box shadow:

box-shadow: h-shadow v-shadow blur spread color inset;

Размытие и распространение не являются обязательными, и я думаю, что, как вы только определили три значения до цвета, браузеры 2 интерпретировали по-разному.

Я получил их выглядеть так же (на мой взгляд, по крайней мере) следующие по Js скрипки:

-moz-box-shadow: 0px 0px 3px 0px #aaa inset; 
-webkit-box-shadow: 0px 0px 5px 0px #aaa inset;

Надеется, что это помогает

источник

2012-06-24 11:35:37

Я не знал о спреде. Большое спасибо. –

+15

Это не относится к проблеме того же стиля «box-shadow», применяя различные размеры теневого разброса между Webkit и Gecko. Очень неприятно, действительно, особенно сейчас, когда -moz-box-shadow больше не поддерживается, поэтому уже невозможно изолировать Firefox! –

Я столкнулся с той же проблемой.
Постарайтесь думать, что все браузеры имеют большую тень, и только веб-кит меньше.
Так решение:

box-shadow: 0 0 2px #aaa inset; /* for all browsers */ 
-moz-box-shadow: 0 0 2px #aaa inset; /* for old firefox */ 
-webkit-box-shadow: 0 0 4px #aaa inset; /* override for Chrome & Safari */

Надеюсь, Chrome и Safari будет продолжать поддерживать -webkit-box-shadow.

источник

2012-12-16 12:53:45 oluckyman

Четвертый параметр - это решение bro. Проверьте предыдущий ответ. –

Firefox и Chrome используют разные средства визуализации, и вокруг него нет простого способа. Как -moz-box-shadow больше не работает, вам не нужно a different way to write a FF-only style:

.myThing { 
    box-shadow: 0 0 4px #aaa inset; 
} 
@-moz-document url-prefix() { 
    .myThing { 
     box-shadow: 0 0 2px #aaa inset; 
    } 
}

Смотрите также this answer.

источник

2015-07-15 09:46:26 mik01aj

Разный выход для одного и того же размера тени в Chrome и Firefox

ответ

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