边框半径，背景图像，背景渐变和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以覆盖外部。这似乎工作，不优雅，但兼容。

此外，通过“左下角的”语法定位似乎只在新的浏览器来工作，所以我通过像素位置定位的背景图像

希望这有助于