Как избавиться от черных артефактов на тексте при использовании фильтра drophadow в IE9

Question

Изображение CSS ниже.Мне нужен заголовок красного цвета с тенью # f2f2f2.В Chrome и Firefox он выглядит нормально, но в IE он показывает маленькие черные артефакты по краям каждой буквы.Есть ли лучший способ сделать эту тень?

h1 {
  color: red;
  text-shadow: 3px 3px 0px #f2f2f2;  
  filter: progid:DXImageTransform.Microsoft.dropshadow(color=#f2f2f2, offX=3, offY=3);
}

Answer 1

Вы можете использовать подобное правило для IE9

h1 {
  color: red;
  background-color: #cccccc;
  text-shadow: 3px 3px 0px #f2f2f2;  
  filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
          progid:DXImageTransform.Microsoft.dropshadow(color=#f2f2f2, offX=3, offY=3);
}

Определение цвета фона предотвратит возникновение артефакта черного контура, а также включение DXImageTransform.Microsoft.Chroma в состав фильтра.все в элементе, который имеет этот цвет прозрачным.Важно не выбирать цвет фона, который будет соответствовать какому-либо цвету содержимого, или он также будет прозрачным.

Источник

Answer 2

Добавить цвет фона к изображению:

.logo-images-panel img {
    margin-left: 20px;
    // added..
    background-color: #FFF;
}