Существует некоторое странное поведение, когда речь идет о тенях блоков в 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
не работает?