IE的图像和透明过滤器问题

Question

我正在编写一个简单的波段，该波段在我网站的浏览器底部运行。我使用半透明 PNG 作为背景来控制一切，但为了获得更大的灵活性，我被要求纯粹在 CSS 中完成。因此，我使用了带有 RGBa 的背景，并回退为纯色，并使用条件样式表，Microsoft 过滤器用于 IE 8 和更早版本。这很好用，我的背景看起来就像我想要的那样。我遇到的问题是这个横幅包含一个比它高的图像。由于我添加了过滤器，它现在可以在 IE 中进行裁剪...如果切换到纯色背景，一切正常。

这是一个已知问题吗？有什么解决办法吗？

这是我的 IE CSS：

/* This is the banner taking the whole browser width */
#bottompub {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;    
    text-align: center;
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B289BAE4,endColorstr=#B289BAE4)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B289BAE4,endColorstr=#B289BAE4);   /* IE6 & 7 */
    zoom: 1;
    margin:0;
    padding:0;
    overflow:visible; /* Just to make sure no parent change that to hidden */
}

/* This is the image in the banner */
#bottompub .pubimage { 
    position:relative;   
    margin-left:220px;
    height:75px;  
}


/* This is to fit my content web site width the image is in there */
#bottompub .insidebottompub {
    width:1031px;   
    margin-left:auto;
    margin-right: auto;     
}

这是简单的 HTML：

<div id="bottompub">
    <div class="insidebottompub">                              
        <a href="http://www.mysite.com"><img class="pubimage" src="myimageof75px.png"/></a>
    </div>
</div>

谢谢！

编辑不使用负边距

Answer 1

这是一个known issue - 单击标记为缺陷的链接以尝试一些事情

我尝试了一下，可以让它在 IE8 上工作，但不是 7，这是带有一些注释的代码，以显示我在 IE7 上尝试过的内容（忽略它们在那里帮助可视化的颜色）

CSS：

/* This is the banner taking the whole browser width */
#bottompub {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;    
    background: transparent;
    background: #cfc;

    zoom: 1;
    /*-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B289BAE4,endColorstr=#B289BAE4)"; /* IE8 */    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B289BAE4,endColorstr=#B289BAE4);   /* IE6 & 7 */    

}

/* This is the image in the banner */
#bottompub .pubimage { 
    height:75px;
    position: relative;
    top: -25px;
    /*z-index: 1;*/
}


/* This is to fit my content web site width the image is in there */
#bottompub .insidebottompub {
    width:1031px;   
    margin: 0 auto;
    text-align: center;
    background: #0f0;
    position: relative;
    /*z-index: 1;*/
}

.insidebottompub a {
position: relative; /* important*/
/* applying hasLyout here doesn't work for IE7 */
}

#bottompub {
/* no z-index or IE8 breaks */
/*z-index: -1;*/
}

将position: relative; 应用于保存图像的链接似乎是主要的，但还有其他变化

Answer 2

首先，您应该尝试 CSS3 以及其他供应商的渐变和不透明度前缀，以确保其一致。

其次，尽量不要为图像设置负边距，而是为父 div 设置隐藏溢出。也就是说：

#bottompub { overflow:hidden; }

编辑：
这适用于 IE9：

/* For Internet Explorer 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FF0000FF,endColorstr=#FFFFFFFF);
/* For Internet Explorer 8+ */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FF0000FF,endColorstr=#FFFFFFFF)";

另外，请查看所有供应商前缀，这是一个简短而好的阅读：
http://css-tricks.com/css3-gradients/

Answer 3

这不是对过滤器问题的修复，而是一种适用于 IE7 和 Firefox 的解决方法，不需要条件样式表并获得相同的效果。我为我的背景颜色和内容使用了一个单独的 div。出于某种原因，我不得不将背景放在 内容之后，否则透明度仍然会被继承，并且图像会被裁剪。我使用 z-index 以正确的顺序显示元素。我保留了主要的 div bottompub 主要是为了使事情井井有条，并为该部分中的所有元素提供不同的 id。

CSS：

#bottompub {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;    
    margin:0;
    padding:0;   
}

#bottompub .background {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;
    background-color:#89BAE4; 
    opacity: .80;    
    filter: alpha(opacity="80");
    z-index: 50;
}


#bottompub .insidebottompub {
    position:relative;
    width:1031px;   
    margin-left:auto;
    margin-right: auto; 
    z-index: 100;    
}

#bottompub .pubimage {
    position:relative;
    float:left;
    left:220px;
    top:-25px;
}

HTML

<div id="bottompub">
    <div class="insidebottompub">                              
        <a href="http://mysite.com"><img class="pubimage" src="myimage.png"/></a>
    </div>
    <div  class="background"/>    
</div>