IE фильтры - тень действует на текст; Градиент + Тень действует на поле?

Question

Когда я присоединяю следующее к div, я получаю прямоугольник с градиентом и тень в IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#D08080', EndColorStr='#E7A292') progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=170, Color='#B8B8B8');

Однако, когда я делаю ПРОСТО фильтр теней, я получаю тень на текст внутри div. Кроме очевидного (и некрасивого) взлома установки отфильтрованного градиента с постоянным цветом, как я могу получить простой div для затенения самого себя, а не его текста во всех версиях IE?

Answer 1

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

Взгляните на CSS3Pie для аккуратного решения проблемы.

CSS3Pie - это хак для IE, который позволяет ему использовать стандартные свойства CSS вместо filter для градиентов и теней. Это также делает border-radius,

Я надеюсь, что это решит ваши проблемы.

Answer 2

В IE есть способ без CSSPie. Проблема в IE 7 и 8 заключается в том, что элемент, к которому применяется тень, должен иметь заданный цвет фона. В противном случае тень наследуется дочерними элементами (включая текст).

Так я получаю кросс-браузерную рамку-тень. Это должно работать для IE 7-10, всех выпусков Chrome и FF, которые я когда-либо пробовал, и Safari тоже. Не обращайте внимания на мой выбор цвета, очевидно, вам нужно установить для него все, что подходит для вашей страницы.

.wrapper {
border: solid 1px #A7A7A7;
background-color:#ffffff;/*transparent won't work*/
}

.shadow {
-moz-box-shadow: 2px 2px 3px #A7A7A7;
-webkit-box-shadow: 2px 2px 3px #A7A7A7;
box-shadow: 2px 2px 3px #A7A7A7;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7');
}

Затем просто примените оба класса к родительскому элементу.

<div class="wrapper shadow">
   <div id="someInnerDiv">
      <p>Some text that used to inherit the box-shadow, but doesn't anymore</p>
   strong text</div>
</div>