-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を試してください...

.sapCPCartBtn {幅：205px;パディング：10px; text-align：center; height：32px; ボックスシャドウ：なし;色：#FFFFFF！重要; 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;カーソル：pointer！important; border：0px！important; background-color：＃ff0000; background：-o-linear-gradient（top、＃333399、＃000066）; background：-moz-linear-gradient（top、＃333399 、＃000066）;背景：-webkit-gradient（linear、left top、left bottom、color-stop（0、＃333399）、color-stop（1、＃000066））; filter：progid：DXImageTransform.Microsoft.gradient （startColorstr ='＃333399'、endColorstr ='＃000066'、GradientType = 0）; /*すなわち*/}

于 2012-11-26T11:18:09.040 に答える