Как я могу заставить это работать в IE?
.fancy {
border: 1px solid black;
margin: 10px;
box-shadow: 5px 5px 5px #cccccc;
-webkit-box-shadow: 5px 5px 5px #cccccc;
-moz-box-shadow: 5px 5px 5px #cccccc;
}
Спасибо
Как я могу заставить это работать в IE?
.fancy {
border: 1px solid black;
margin: 10px;
box-shadow: 5px 5px 5px #cccccc;
-webkit-box-shadow: 5px 5px 5px #cccccc;
-moz-box-shadow: 5px 5px 5px #cccccc;
}
Спасибо
На вашем сайте это правило CSS предотвращает работу box-shadow
в IE9:
table, table td {
border-collapse: collapse;
}
Смотрите: box-shadow на IE9 не отображает с помощью правильного CSS, работает в Firefox, Chrome
Вы должны добавить
border-collapse: separate;
к элементу, которыйbox-shadow
не работает.
Итак, это должно решить проблему для вас:
.fancy {
border-collapse: separate;
}
box-shadow поддерживается с IE9 и далее.
Существует множество сайтов, описывающих, как это сделать для старых IE. Один из них: http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/
Также проверьте: http://www.css3.info/preview/box-shadow/
Мое личное мнение в целом о том, что старые браузеры делают то, чего они на самом деле не могут: Избегайте этого. Вместо этого примените принципы прогрессивного улучшения. Также объясните своему клиенту, что решение проблем устаревших, нестандартных браузеров с нестандартным решением очень трудоемко и, вероятно, не стоит усилий.
Он отлично работает в IE 9.
Более ранние версии не поддерживают box-shadow
, но вы можете использовать фильтр:
zoom: 1;
filter:
progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=180);
Вы также можете использовать http://css3pie.com/
PIE делает Internet Explorer 6-9 способным отображать несколько самые полезные функции оформления CSS3.
Из google: filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);
Наверное, не совсем так, как вы этого хотите, но поиграйте с ним или посмотрите еще DXImageTransform
.
В IE вам нужно использовать фильтр для этого эффекта.
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
По умолчанию IE настраивал режим совместимости IE10, который должен быть заменен на IE 9 с использованием метатега. Таким образом, всякий раз, когда он будет запущен в других браузерах, он будет использовать CSS, который будет совместим с IE9. Как и в режиме IE10, свойство "свойство-тени" CSS было удалено из библиотеки
Мы можем использовать метатег в голове, чтобы изменить уровень совместимости документов:
<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" />
Над тегом показано, что этот документ совместим с IE8 и IE9 для браузеров, отличных от IE8 и IE9, переключает уровень CSS в IE9.
Я считаю, что эта проблема специфична для вашего браузера, потому что она работает для меня в этом jsFiddle как на IE9, так и на Chrome. Ссылка, которую вы предоставили, работает в Chrome, но не в IE9. Это будет означать, что проблема специфична для вашей реализации.
Я бы попробовал убедиться, что режим совместимости отключен, а также убедитесь, что у вас нет настроек, которые могли бы помешать работе с CSS. Я бы также предложил проверить это в нескольких браузерах и использовать процесс устранения, чтобы определить, почему он не работает.
ИЗМЕНИТЬ
Я просто смотрел на вашу разметку. Попробуйте удалить эту строку и посмотреть, не имеет значения:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Это уже 2018 год, происходит то же самое с IE11. Иногда box-shadow не работает, но иногда это работает.
Я попробовал это с IE11 и IE10: попробуйте изменить отображение элемента, где вы хотите добавить тень (обычно "display: block" работает нормально):
.fancy {
display: block;
border: 1px solid black;
margin: 10px;
box-shadow: 5px 5px 5px #ccc;
}
Добавление display: block;
у меня класс CSS работает в IE11...
Для меня проблема заключалась в том, что IE, похоже, не нравятся шестнадцатеричные цвета с 8 цифрами (последние два были для альфа-канала). Я решил проблему, переключившись с шестнадцатеричных цветов на цвета rgba().
Я обнаружил это случайно и удивился, что нигде не видел этого!