CSS Box-Shadow не работает в IE

Ответ 1

На вашем сайте это правило 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;
}

Ответ 2

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/

Мое личное мнение в целом о том, что старые браузеры делают то, чего они на самом деле не могут: Избегайте этого. Вместо этого примените принципы прогрессивного улучшения. Также объясните своему клиенту, что решение проблем устаревших, нестандартных браузеров с нестандартным решением очень трудоемко и, вероятно, не стоит усилий.

Ответ 3

Он отлично работает в 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://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

Ответ 4

Вы также можете использовать http://css3pie.com/

PIE делает Internet Explorer 6-9 способным отображать несколько самые полезные функции оформления CSS3.

Ответ 5

Из google: filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);

Наверное, не совсем так, как вы этого хотите, но поиграйте с ним или посмотрите еще DXImageTransform.

Ответ 6

В 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;

Ответ 7

По умолчанию 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.

Ответ 8

Я считаю, что эта проблема специфична для вашего браузера, потому что она работает для меня в этом jsFiddle как на IE9, так и на Chrome. Ссылка, которую вы предоставили, работает в Chrome, но не в IE9. Это будет означать, что проблема специфична для вашей реализации.

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

ИЗМЕНИТЬ

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

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Ответ 9

Это уже 2018 год, происходит то же самое с IE11. Иногда box-shadow не работает, но иногда это работает.

Я попробовал это с IE11 и IE10: попробуйте изменить отображение элемента, где вы хотите добавить тень (обычно "display: block" работает нормально):

.fancy {
  display: block;
  border: 1px solid black;
  margin: 10px;
  box-shadow: 5px 5px 5px #ccc;
}

Ответ 10

Добавление display: block; у меня класс CSS работает в IE11...

Ответ 11

Для меня проблема заключалась в том, что IE, похоже, не нравятся шестнадцатеричные цвета с 8 цифрами (последние два были для альфа-канала). Я решил проблему, переключившись с шестнадцатеричных цветов на цвета rgba().

Я обнаружил это случайно и удивился, что нигде не видел этого!