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 */

过滤器不允许“透明”作为颜色值，但它允许你use an 8-digit hex reference，其中前两位指定颜色的不透明度（就像{{1中的最后一个值一样）颜色参考）。

More on using RGBA and transparency & using MS Filters

如果可怕的数学位得到你，你可以找到例如在Windows计算器rgba()中，在科学视图中打开它，执行 255 * 0.6 = 153 ，然后点击转换的“十六进制”复选框= 0.6 transparency

在上面的示例中，它从完全透明（0.0不透明度）= 255 * 0 =十六进制值“99”开始到完全不透明（1.0不透明度）= 255 * 1 =十六进制值“{ {1}}“

更新在评论中由 thirtydot 友好关联，这里有一个方便的converter from RGBa to MS Filter syntax

Answer 2

我建议使用CSS3Pie而不是硬编码filter这种类型的东西 - 它更容易，更符合标准;它允许您在旧版本的IE中为渐变使用标准CSS3。

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

2 个答案: