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漸變和邊框半徑問題

回答

相關問題