边框半径、背景图片、背景渐变以及IE8、IE10

Question

我有一个带有边框半径、背景渐变和背景图像的 div，可在 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并嵌套了div。然后重新定位内部 div 以覆盖外部。这似乎可行，但不优雅，但兼容。

此外，通过“左下”语法定位似乎只适用于较新的浏览器，所以我按像素位置定位背景图像

希望对你有帮助