邊框半徑，背景圖像，背景漸變和IE8，IE10

Question

我有一個帶邊框半徑，背景漸變和工作在FireFox中的背景圖像，但不是在IE8或IE10中。漸變和背景圖像在IE8中工作，但是當我應用邊框半徑時，邊框消失。

.add-to-carttest { 
border: 1px solid #004f9e; 
padding: 5px 5px 5px 50px; 
width:100px; 
height: 40px; 
font-weight:bold; 
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -webkit-gradient(linear, 0 0, 0 bottom, from(#e1f0ff), to(#73b9ff)); 
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -webkit-linear-gradient(#e1f0ff, #73b9ff); 
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -ms-linear-gradient(#e1f0ff, #73b9ff); 
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -o-linear-gradient(#e1f0ff, #73b9ff); 
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, linear-gradient(#e1f0ff, #73b9ff); 
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, linear-gradient(#e1f0ff, #73b9ff); 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
behavior: url(../../Graphics/PIE/PIE.htc); 
position:relative; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e1f0ff", endColorstr="#73b9ff",GradientType=0), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png");} 

Answer 1

邊界半徑不提供IE8

http://www.quirksmode.org/css/backgrounds-borders/

哎呀 - 只注意到你的行爲入門...可能要仔細檢查你的路徑

確定這裏就是我「已經想出：

CSS：

.common 
{ 
    width: 100px; 
    height: 40px; 
    border: 1px solid #004f9e; 
    padding: 5px 5px 5px 50px; 
    margin: 0px; 
    font-weight: bold; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    !behavior: url(../../Graphics/PIE/PIE.htc); 
    position: relative; 
    border-collapse:collapse; 
} 

.add-to-carttest 
{ 
    background-image: url('https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png'); 
    background-position:20px 20px; 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    top:-6px; 
    left:-51px; 
} 

.gradient 
{ 
    background: -moz-linear-gradient(#e1f0ff, #73b9ff); 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e1f0ff), to(#73b9ff)); 
    background: -webkit-linear-gradient(#e1f0ff, #73b9ff); 
    background: -ms-linear-gradient(#e1f0ff, #73b9ff); 
    background: -o-linear-gradient(#e1f0ff, #73b9ff); 
    background: linear-gradient(#e1f0ff, #73b9ff); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1f0ff', endColorstr='#73b9ff',GradientType=0); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1f0ff', endColorstr='#73b9ff',GradientType=0)"; 
} 

HTML：

<div class="common gradient"> 
    <div class="common add-to-carttest"></div> 
</div> 

似乎在IE8覆蓋並隱藏梯度過濾器或重新定位該背景圖像，因爲它似乎本身呈現爲圖像的梯度。所以我拆開了CSS並且嵌套了divs。然後重新定位內部div以覆蓋外部。這似乎工作，不優雅，但兼容。

此外，通過「左下角的」語法定位似乎只在新的瀏覽器來工作，所以我通過像素位置定位的背景圖像

希望這有助於