IE 在使用 css 渐变的 div 中添加蓝色边框
我正在尝试制作一条灰线，该线逐渐淡出为透明。我创建了一个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，并使其更高，渐变似乎有效，但颜色是蓝色，并且添加了边框。为什么？
I'm trying to make a gray line, that is fading out to transparent. I created a div, that is 1x100px, and added css gradient to make the fade effect.
It works fine, except in IE where the div gets a blue border, which I cant get rid off.
This is my css for the 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 */
}
I've tried to inspect the div, and make it higher, and the gradient seems to work, but the color is blue, and a border is added. Why?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
将过滤器更改为：
过滤器不允许“透明”作为颜色值，但它允许您 使用 8 位十六进制参考，其中前两位数字指定颜色的不透明度（就像 < 中的最后一个值一样）代码>rgba()颜色参考）。
更多关于使用 RGBA 和透明度 &使用 MS 过滤器
如果可怕的数学让您感到困惑，您可以在 Windows 计算器中找到例如
0.6 透明度，在科学视图中打开它，执行 255*0.6 = 153 然后单击“十六进制”复选框进行转换 =99在上面的示例中，它从完全透明（0.0 不透明度）= 255*0 = 十六进制值“
00”开始code>" 到完全不透明（1.0 不透明度） = 255*1 = 十六进制值 "ff"更新 正如评论，这里有一个方便的从 RGBa 到 MS Filter 语法的转换器< /a>
Change the filter to:
The filter doesn't allow “transparent” as a color value, but it does allow you to use an 8-digit hex reference, where the first two digits specify the opacity of the colour (just like the last value in
rgba()color references).More on using RGBA and transparency & using MS Filters
if the scary maths bit gets you, you can find e.g.
0.6 transparencyin Windows calculator, open it in scientific view, do 255*0.6 = 153 then click the "hex" checkbox for the conversion =99in the example above it was starting at the the fully transparent (0.0 opacity) = 255*0 = hex value "
00" through to fully opaque (1.0 opacity) = 255*1 = hex value "ff"Update As kindly linked by thirtydot in the comments, here's a handy converter from RGBa to MS Filter syntax
我建议使用 CSS3Pie 而不是硬编码此类事情的
filter样式——它更容易并且更符合标准；它允许您在旧版本的 IE 中使用标准 CSS3 进行渐变。I'd recommend using CSS3Pie instead of hard-coding the
filterstyle for this sort of thing -- it's a lot easier and more standards-compliant; it allows you to use standard CSS3 for your gradients in older versions of IE.