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

这是一个known issue - 点击标有 flaws 的链接可以尝试一些事情

我尝试了一下，可以让它适用于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>

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

3 个答案: