-3

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

如果您在右侧检查 IE 浏览器，则会采用背景颜色。

我正在尝试解决此问题，但我无法做到。所有浏览器都运行良好，只有 IE 面临这个问题

这是演示：链接

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;
}​
4

1 回答 1

-1

当您在 IE 圆角中的同一类中使用过滤器和边框半径时，请尝试这一点和另一件事...尝试下面的 css...

.sapCPArtBtn {宽度：205px；填充：10px；文本对齐：居中；高度：32px；盒子阴影：无；颜色：#FFFFFF ！重要；字体粗细：粗体；字体大小：1em ！important；-moz-border-radius：10px ！important；-webkit-border-radius：10px ！important；边框半径：10px ！important；-khtml-border-radius：10px ！important；-goog-ms-border-radius：10px ！important；margin-top：5px；text-align：center；display：inline-block；光标：指针！重要；边框：0px ！重要；背景颜色：#ff0000；背景：-o-线性渐变（顶部，#333399，#000066）；背景：-moz-线性渐变（顶部，#333399 , #000066);背景：-webkit-gradient(linear,left top,left bottom,color-stop(0, #333399),color-stop(1, #000066));过滤器：progid:DXImageTransform.Microsoft.gradient (startColorstr='#333399', endColorstr='#000066', GradientType=0); /* IE */}

于 2012-11-26T11:18:09.040 回答