box-shadow IE8 не работает на IE8

Я просмотрел все актуальные темы, но не смог найти решение, поэтому создал этот вопрос. Я пытаюсь реализовать box-shadow на IE8 И он не работает.. Он работает на IE9+?

У меня есть простой div:

<span id="controls" class="box-shadow"> 
<input id="start" type="text" placeholder="Get Directions: Enter Address or Postcode"/> 
<input id="end" type="hidden" value="Text" /> 
</span>

И CSS:

#controls.box-shadow{
background-color: white;
font-size: 13px;
position: relative;
padding: 5px;
z-index: 10000;
float: right;
height: 35px;
width: 96%;
margin-left: 20px;

}
.box-shadow{
box-shadow: 0px 0px 15px 0px #232361;
-moz-box-shadow: 0px 0px 15px 0px #232361;
-webkit-box-shadow: 0px 0px 15px 0px #232361;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#232361')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#232361');
}
#start{ width:82%; height:27px; border:none; padding:5px}

3 ответа

Решение

Box-shadow изначально не работает в IE8, но вы можете использовать polyfill для CSS3.

Вот рабочий пример: http://css3pie.com/

Вы должны применить polyfill к вашему элементу так

.box-shadow {
     box-shadow: 0px 0px 15px 0px #232361;
     -moz-box-shadow: 0px 0px 15px 0px #232361;
     -webkit-box-shadow: 0px 0px 15px 0px #232361;
    behavior: url(PIE.htc);
}

CSS3 box-shadow не поддерживается в IE8 или ниже. Лично я бы не беспокоился о поддержке IE8, но если вам нужно, то у MS есть DropShadow это было примерно с IE5.5.

"Box Shadow" - поддержка

Drop Shadow

Если вы не хотите использовать какой-либо сторонний плагин, вы можете обратиться к этому сайту:

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

Другие вопросы по тегам