Question

我想在CSS或CSS3中设计一个具有一定透明度的盒子，它必须在IE8中工作，我制作了这个代码，它在其他浏览器中运行良好，但在IE8中盒子变得完全透明，如何修复这个问题？

.price_tag {
    position: absolute;
    height: 146px;
    width: 295px;
    left: 210px;
    top: 241px;
    background-color: rgba(221, 221, 221, 0.7);
    border-radius: 8px;
    z-index: 200;

    -webkit-box-shadow: -2px -2px 6px rgba(255,255,255, 1) inset, 2px 0px 4px rgba(255,255,255,1) inset;

    box-shadow: -2px -2px 6px rgba(255,255,255, 1) inset, 2px 0px 4px rgba(255,255,255,1) inset;

    behavior: url(pie/PIE.htc); 
}

Answer 1

IE8中不支持

rgba，对于后备技巧，这可能会有所帮助。http://css-tricks.com/rgba-browser-support/

Answer 2

你必须“破解”IE8中的不透明效果。

一种方法是使用1x1透明png：

background-image: url(<path to your url>);

另一种方法是使用ms-filters：

opacity : 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);

但是最后一个是不方便的。所有选择器将被“字母”化为0.7。因此，您应将您的内容（文本，图像，等等......）放在另一个容器中。

rgba（）在IE8中无法正常工作

2 个答案: