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

Question

Как я могу заставить это работать в 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; 
} 

Благодаря

Answer 1

От Google: filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);

Вероятно, не так, как вы хотите, но возиться с ним или смотреть в DXImageTransform немного.

Answer 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/

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

Answer 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); 

Read: http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

Answer 4

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

Answer 5

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

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

EDIT

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

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

Answer 6

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

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

Answer 7

На вашем сайте, это правило CSS мешает box-shadow работать в IE9:

table, table td { 
    border-collapse: collapse; 
} 

См:box-shadow on IE9 doesn't render using correct CSS, works on Firefox, Chrome

Вы должны добавить border-collapse: separate; к элементу, box-shadow является не работает.

Таким образом, это должно решить эту проблему для вас:

.fancy { 
    border-collapse: separate; 
} 

Answer 8

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