IE为使用css渐变的div添加蓝色边框答案

【问题标题】：IE adds blue border to div where css gradient is usedIE为使用css渐变的div添加蓝色边框
【发布时间】：2011-07-26 17:35:55
【问题描述】：

我正在尝试制作一条灰线，它逐渐变透明。我创建了一个 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 并将其设置得更高，渐变似乎有效，但颜色为蓝色，并添加了边框。为什么？

【问题讨论】：

标签： css internet-explorer gradient linear-gradients

【解决方案1】：

将过滤器更改为：

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

过滤器不允许“透明”作为颜色值，但它允许您使用use an 8-digit hex reference，其中前两位数字指定颜色的不透明度（就像rgba() 颜色引用中的最后一个值一样)。

More on using RGBA and transparency & using MS Filters

如果你被可怕的数学所吸引，你可以找到例如0.6 transparency 在 Windows 计算器中，在科学视图中打开它，执行 255*0.6 = 153 然后单击“十六进制”复选框进行转换 = 99

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

更新正如 thirtydot 在 cmets 中友情链接，这里有一个方便的 converter from RGBa to MS Filter syntax

【讨论】：

我正在编辑以添加 LOL - 感谢您找到参考 Paul！
@clairesuzy：哎呀！抱歉，我确实跳进去了——请随时重新编辑成你自己的风格。
不需要保罗，它有帮助！我刚刚添加了计算信息，我花了很长时间才找到需要它的时间；）
@clairesuzy：哦，是的，十进制到十六进制总是让我头疼。很好的答案。
这对于生成filter 语法很有用：kimili.com/journal/…

【解决方案2】：

我建议使用CSS3Pie 而不是硬编码filter 样式来处理这类事情——它更容易且更符合标准；它允许您在旧版本的 IE 中使用标准 CSS3 进行渐变。

【讨论】：

谢谢@Spudley，我会检查 CSS3Pie :)