IE将蓝色边框添加到使用css渐变的div

Question

我正在尝试制作一条灰色线条,这条线条渐渐变为透明.我创建了一个div,即1x100px,并添加了css渐变以产生淡入淡出效果.

它工作正常,除了在IE中,div得到一个蓝色边框,我不能摆脱它.

这是我的div的css

#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,并使其更高,渐变似乎工作,但颜色是蓝色,并添加边框.为什么？

Answer 1

将过滤器更改为:

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然后单击"十六进制"复选框进行转换=99

在上面的示例中,它从完全透明(0.0不透明度)= 255*0 =十六进制值" 00"开始到完全不透明(1.0不透明度)= 255*1 =十六进制值" ff"

更新由评论中的thirtydot友情链接,这是一个从RGBa到MS Filter语法的方便转换器