Question

我的CSS看起来像这样：

#bbb {
  border: solid rgba(0, 0, 0, .45) 200px;
  height: 1500px;
  width: 960px;
}

我真的需要让边框透明，但它在IE6 / 7/8上不起作用，我该如何处理呢？

Answer 1

不使用图像的替代方案是：

<强> HTML

<div class="component">
    <div class="background"></div>
    <div class="content">..Content..</div>
</div>

<强> CSS

   div.component {
    position: relative;
}
div.background {
    background:#f00;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
    -webkit-opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
}
div.content {
    background:#fff;
}

您可以根据需要缩放边框。这个使用定位，你也可以使用填充/边距。

http://jsfiddle.net/u7Srh/2/

Answer 2

你可以做这样的事情，它基本上是在“内容div”周围呈现透明背景的“边界div”。通过更改padding中的div.border值来设置“边框宽度”，颜色/透明度来自background-image值，该值目前链接到50% transparent black像素大小的图像。

<强> HTML

<div class="border">
    <div class="content"></div>
</div>

<强> CSS

div.content {
    background-color: #FFF;
    width: 300px;
    height: 200px;
}
div.border {
    display: inline-block;
    *display: inline;
    padding: 200px;
    background-image: url(https://dl.dropboxusercontent.com/u/6928212/halftransparentpixel.gif);
    zoom: 1;
}

这是一个 fullscreen jsFiddle ，应该可以在IE6 / 7/8中使用。

这是 editable jsFiddle 的链接，无法在旧浏览器中正确加载。

Answer 3

你不能在IE8及更早版本中使用RGBA，据我所知，它也没有填充。

正如其他人所说，你可以使用背景代替，但你不需要使用图像。您也无法使用Opactiy（或filter: alpha(opacity)），因为这也会让孩子们保持透明。

相反，您可以为父元素指定ARGB格式的单色filter渐变。

.parent {
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)"; /* IE8 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF);   /* IE6 & 7 */
  zoom: 1;
}

这相当于现代浏览器中的background: rgba(255, 255, 255, .5);。

如需更长时间的解释和rgba转argb转换器，请参阅this article。

是否可以在IE6 / 7/8中应用RGBA边框？

3 个答案: