IE渐变和边框半径问题

-3

我正在创建一个带有边框半径和渐变的按钮。IE渐变和边框半径问题

如果您在IE浏览器右侧检查背景颜色。

我想解决这个问题，但我无法做到这一点。所有的浏览器都做工精细，只有IE正面临着这个问题

这里是演示：Link

HTML：

<span aria-disabled="false" id="__button2-0" class="sapUiSegmentedButton" role="radiogroup" tabIndex="0" data-sap-ui="__button2-0"> 
    <button aria-haspopup="true" aria-disabled="false" id="__button3-0" class="sapCPDownloadBtn sapCPCartBtn sapUiBtn sapUiBtnNoGradient sapUiBtnNorm sapUiBtnS sapUiBtnStd sapUiMenuButton" role="button" tabIndex="-1" type="button" data-sap-ui="__button3-0"> 
     <span class="sapUiBtnTxt">Download</span> 
     <span class="sapUiMenuButtonIco"></span> 
    </button> 
</span>

CSS：

.sapCPCartBtn { 
    width: 205px; 
    /* fallback */ 
    padding: 10px; 
    text-align: center; 
    height: 32px; 
    box-shadow: none; 
    color: #FFFFFF !important; 
    font-weight: bold; 
    font-size: 1em !important; 
    -moz-border-radius: 10px !important; 
    -webkit-border-radius: 10px !important; 
    border-radius: 10px !important; 
    -khtml-border-radius: 10px !important; 
    -goog-ms-border-radius: 10px!important; 
    margin-top: 5px; 
    text-align: center; 
    display: inline-block; 
    cursor: pointer !important; 
    border: 0px!important; 
    background-color: #ff0000; 
    background: -o-linear-gradient(top, #333399, #000066); 
    background: -moz-linear-gradient(top, #333399, #000066); 
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333399),color-stop(1, #000066)); 
} 

.sapCPCartBtn { 
    background: none\9; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#001E5799', endColorstr='#bb7db9e8', GradientType=1)\9; 
/* ie */ 
    box-shadow: none\9 !important; 
    background-position: 1px 1px \9; 
}

来源

2012-11-26 user1853128

这不是你如何规避过滤器。再试一次。 – BoltClock

[IE9滤镜渐变和边框半径冲突]的可能重复（http://stackoverflow.com/questions/10399726/ie9-filter-gradient-and-border-radius-conflict） –

-1

试试这个，一个更多的事情，当你在同一个类中使用过滤器和边界半径在圆角不会工作...尝试下面的CSS ...

.sapCPCartBtn {width：205px; padding：10px; text-align：center; height：32px; box-shadow：none; color：#FFFFFF！important; font-weight：bold; font-size：1em！important; -moz-border-radius：10px！important; -webkit-border-radius：10px！important; border-radius：10px！important; -khtml-border-radius：10px！important; -goog-ms-border-radius：10px！important; margin-top：5px; text-align：center; display：inline-block; cursor：pointer！important; border：0px！important; background-color：＃ff0000; background：-o-linear-gradient（top，＃333399，＃000066）; background：-moz-linear-gradient（top，＃333399 ，＃000066）;背景：-webkit-gradient（线性，左上角，左下角，color-stop（0，＃333399），color-stop（1，＃000066））; filter：progid：DXImageTransform.Microsoft.gradient （startColorstr ='＃333399'，endColorstr ='＃000066'，GradientType = 0）;/* ie * /}

来源

2012-11-26 11:18:09 Gopikrishna

wtf你有没有做过？请再试一次。 – Kyle

IE渐变和边框半径问题

回答

相关问题