問題與圖像和透明過濾器的IE

Question

我正在編碼一個簡單的樂隊，在我的網站瀏覽器的底部。我用一個半透明的PNG作爲我的背景，控制了一切，但爲了獲得更大的靈活性，我被要求純粹用CSS來完成。所以我使用了RGBa背景，使用了一個條件樣式表，爲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

它不是過濾問題的修復程序，但在IE7和Firefox工作的解決方法而不需要條件樣式表和獲得相同的效果。我用我的背景顏色和我的內容分開的div。出於某種原因，我不得不將背景放在之後的內容中，否則透明度仍然繼承並且圖像被裁剪掉。我使用z-index以正確的順序顯示元素。我保留主要的div底部主要是爲了讓事情組織起來，併爲該部分中的所有元素提供明確的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> 

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

這是一個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;到鏈路保持圖像似乎是主要的，但也有其他的變化