IE добавляет синюю границу в div, где используется CSS градиент - PullRequest
Новая
       63

IE добавляет синюю границу в div, где используется CSS градиент

2 голосов
/ 31 марта 2011

Я пытаюсь сделать серую линию, которая становится прозрачной.Я создал div, размером 1x100px, и добавил градиент css для создания эффекта затухания.

Он работает нормально, кроме IE, где div получает синюю рамку, от которой я не могу избавиться.

Это мой CSS для div 

#left_header_border {
    position:absolute;
    bottom:-1px;
    left:-100px;
    width:100px;
    height:1px;  

    /* gradient */
    background-color: transparent;
    background-image: -moz-linear-gradient(left, transparent, #cccccc); /* FF3.6 */
    background-image: -o-linear-gradient(left, transparent, #cccccc); /* Opera 11.10+ */
    background-image: -webkit-gradient(linear,left bottom,right bottom,color-stop(0, transparent),color-stop(1, #cccccc)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(left,transparent, #cccccc); /* Chrome 10+, Saf5.1+ */
    background-image: linear-gradient(left, transparent, #cccccc);
              filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorStr='transparent', EndColorStr='#cccccc'); /* IE6–IE9 */
}

Я пытался проверить div и сделать его выше, и градиент, кажется, работает, но цвет синий, а границадобавлено.Почему?

Ответы [ 2 ]

6 голосов
/ 31 марта 2011

Измените фильтр на: 

filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorStr='#00cccccc', EndColorStr='#ffcccccc'); /* IE6–IE9 */

Фильтр не допускает «прозрачность» в качестве значения цвета, но он позволяет использовать 8-значную шестнадцатеричную ссылку , где первые две цифры определяют непрозрачность цвета (просто как последнее значение в rgba() цветовых ссылках).

Подробнее об использовании RGBA и прозрачности и использовании фильтров MS

если вас пугает математика, вы можете найти, например, 0.6 transparency в калькуляторе Windows, откройте его в научном представлении, выполните 255 * 0.6 = 153 , затем установите флажок "hex" для преобразования = 99

в приведенном выше примере он начинался с полностью прозрачного (непрозрачность 0,0) = 255 * 0 = шестнадцатеричное значение "00" до полностью непрозрачного (непрозрачность 1,0) = 255 * 1 = шестнадцатеричное значение "ff «

Обновление Как любезно связано тридцаткой в комментариях, вот удобный преобразователь из RGBa в MS Filter синтаксис

1 голос
/ 31 марта 2011

Я бы рекомендовал использовать CSS3Pie вместо жесткого кодирования стиля filter для такого рода вещей - это намного проще и более соответствует стандартам; это позволяет вам использовать стандартный CSS3 для ваших градиентов в более старых версиях IE.

...