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

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

3 голосов
/ 10 марта 2011

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

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

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

Ответы [ 2 ]

2 голосов
/ 15 марта 2013

Есть способ сделать это в 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>
2 голосов
/ 10 марта 2011

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

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

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

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

...