Question

我在FireFox中有一个带边框半径，背景渐变和背景图像的div，但在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中没有border-radius

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

oops - 只是注意到你的行为条目...可能想要仔细检查你的路径

好的，这就是我想出来的：

<强> 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以覆盖外部。这似乎有效，不优雅，但兼容。

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

希望这有帮助

边框半径，背景图像，背景渐变和IE8，IE10

1 个答案: