Question

我正在创建一个边框半径和渐变的按钮。

如果您在右侧的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;
}

Answer 1

尝试这个以及在IE中使用过滤器和边框半径在IE中的另一个圆角时将无法正常工作...尝试下面的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（线性，左上，左下，颜色停止（0，＃333399），颜色停止（1，＃000066））;过滤器：progid：DXImageTransform.Microsoft.gradient （startColorstr ='＃333399'，endColorstr ='＃000066'，GradientType = 0）; / * ie * /}

IE Gradient和border Radius问题

1 个答案: