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

Question

我正在编写一个简单的带子，该带子出现在我的网站浏览器底部。我使用半透明 PNG 作为背景来控制一切，但为了获得更大的灵活性，我被要求纯粹使用 CSS 来完成。因此，我使用了 RGBa 背景并回退到纯色，并使用条件样式表、适用于 IE 8 及更早版本的 Microsoft 过滤器。这很好用，我的背景看起来就像我想要的那样。我遇到的问题是这个横幅包含一个比它高的图像。由于我添加了过滤器，它现在在 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

这是一个已知问题 - 单击标记为缺陷的链接对于一些要尝试的事情，

我尝试了一点，可以让它适用于 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;*/
}

应用 < code>position:relative; 到保存图像的链接似乎是主要的事情，但还有其他变化

Answer 2

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

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

#bottompub
{
溢出：隐藏；
}

编辑：
这适用于 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>