2

CSS を使用してボタン スタイルを作成しましたが、IE9 で問題が発生しました。Firefox では問題なく動作します。

コード：

 .my_box {
    -moz-box-shadow:inset 0px 1px 0px 0px #f9eca0;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f9eca0;
    box-shadow:inset 0px 1px 0px 0px #f9eca0;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f2ab1e) );
    background:-moz-linear-gradient( center top, #f0c911 5%, #f2ab1e 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e');
    background-color:#f0c911;
    -webkit-border-top-left-radius:33px;
    -moz-border-radius-topleft:33px;
    border-top-left-radius:33px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:33px;
    -moz-border-radius-bottomright:33px;
    border-bottom-right-radius:33px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #e65f44;
    display:inline-block;
    color:#c92200;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:40px;
    line-height:40px;
    width:100px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #ded17c;
}

フィドルを見る

IE9 で動作させるにはどうすればよいですか?

JSfiddleに答えてください

4

6 に答える 6

2 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
于 2013-09-30T10:29:24.287 に答える
1

CSS ボーダー半径は、これをページ ヘッダーに追加することで機能します。

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>

これが HTML ドキュメントの上部にあることを確認してください

<!DOCTYPE html>
于 2013-09-30T10:30:32.207 に答える
1

これを使用できますhttp://css3pie.com/ IE 6-9で動作します

于 2013-09-30T10:32:02.633 に答える
1

要素に境界半径を持つコンテナーを与え、コンテナーのオーバーフローを非表示に設定し、この要素にも境界を与えます。

HTML

<div class='rounded'>
    <a href="#" class="my_box">TEXT</a>
</div>

CSS

.rounded{
    -webkit-border-top-left-radius:33px;
    -moz-border-radius-topleft:33px;
    border-top-left-radius:33px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:33px;
    -moz-border-radius-bottomright:33px;
    border-bottom-right-radius:33px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    overflow:hidden;
    display:inline-block;
    border:1px solid #e65f44;
}

JSFiddle

IE 9で試行およびテスト済み

于 2013-09-30T10:43:20.687 に答える
1

フィルタなしで試してみてください

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e');

それはスタイルをオーバーライドできます。

フィドル

于 2013-09-30T10:39:34.293 に答える
0

これを試して：

-webkit-border-top-right-radius: 36px;
-webkit-border-bottom-left-radius: 36px;
-moz-border-radius-topright: 36px;
-moz-border-radius-bottomleft: 36px;
border-top-right-radius: 36px;
border-bottom-left-radius: 36px;

border-radius.comで境界半径を作成できます

于 2013-09-30T10:32:56.087 に答える