box-shadow с Safari, Chrome и IE - PullRequest
       22

box-shadow с Safari, Chrome и IE

5 голосов
/ 06 декабря 2011

Существует некоторое странное поведение, когда речь идет о тенях блоков в Chrome и Safari.

Когда я использую box-shadow, браузер Chrome в последних версиях поддерживает спецификацию CSS3 без префикса -webkit-*,но браузер Safari этого не делает.

Это было бы неплохо, если бы Chrome simple перезаписал -webkit-box-shadow на box-shadow, что и происходит, когда обе тени одинаковы.

Итак, чтобы иметь тень от моего ящика в Chrome и Safari, мне нужно следующее.

.some-class {
   box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.65);
   -webkit-box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.65);
}

, который отлично работает в Safari, Chrome, FF и Opera.

Но для IE9 тень от окна выглядит ужасно.У меня должна быть другая тень для IE9, нужно использовать что-то вроде box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35);

Так что мой CSS выглядит следующим образом

.some-class {
   box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35);
   -webkit-box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.65);
}

Но я не хочу, чтобы FF имелокно-тень IE9, поэтому я вставляю CSS-хак

.some-class {
-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
}
/* IE9 */
@media all and (min-width:0) {
    .some-class  > ul.navigationlist{
         box-shadow: 0 0 4px 1px rgba(0,0,0,0.35) \0/;
    }
}

, теперь мой вопрос: есть ли лучший способ сделать это?За исключением условных комментариев, которые, как я знаю, предназначены для этого, бла, бла ...


править 2-й вопрос:
Вы все видите, как тень от блока в IE9 отличается от таковой в FF?или Chrome тоже?


edit
3-ий вопрос:
Есть ли другой префикс, чем -ms-*, который можно использовать для box-shadow, так как -ms-box-shadow не работает?

Ответы [ 3 ]

4 голосов
/ 09 декабря 2011

Обычно вы бы каскадно переходили от префиксов вендора к стандартному значению свойства, но в вашем случае, я думаю, вам нужно использовать эффект каскада в обратном порядке и поставить стандарт вверху, а префиксы вендора ниже, чтобыспецифично для переопределения стандарта во всех кроме IE.

.some-class {
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35);
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
}
2 голосов
/ 08 декабря 2011

использовать -moz-box-shadow стиль для FF

РЕДАКТИРОВАТЬ: есть префикс -ms для некоторых стилей css3, но не для всех, к сожалению, IE9 не принимает префикс -ms-box-shadow, поэтому вы должны использовать условные операторы, но в случае других стилей вы можете использовать этот префикс, например -ms-поведения, -ms-фильтра и т. д.

0 голосов
/ 08 декабря 2011

Используйте условный комментарий для включения таблицы стилей IE9:

<style>
/*regular css*/
</style>

<!--[if IE 9]>
<style>
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35);
</style>
<![endif]-->
...