開発中のページ全体で、ボタンにborder-radiusを使用しています。IE8 では境界線の半径がサポートされていないため、ボタンは角丸長方形ではなく長方形として表示されます。これを修正するために、IE8 の場合にフォールバックすることを期待して、背景画像を追加しました。これには 2 つの問題があるようです。
1）画像にフォールバックせず、背景色がまだ画像を上書きしているようです2）Chromeなどの新しいブラウザバージョンでは、境界線の半径が表示されず、デフォルトで背景画像になります。
Chrome/Safari/Firefox の CSS については、このフィドルを参照してください: http://jsfiddle.net/s33Mb/
<a href="download.html" class="download-button">
<div class="now">DOWNLOAD NOW</div>
<div class="arrow-right"></div>
</a>
.download-button {
background-color:#1c9aca;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: absolute;
width: 133px;
height: 25px;
text-decoration:none;
}
.now {
width:109px;
position:absolute;
font-family:Arial;
font-size:12px;
font-weight:bold;
position:absolute;
bottom: 5px;
left: 18px;
color:#ffffff;
}
.arrow-right {
width: 0px;
height: 0px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #fff;
position: absolute;
bottom: 7px;
left: 8px;
}
IE のフィドル試行: http://jsfiddle.net/MZ72w/ - chrome/safari/firefox で確認できますが、現在は背景画像のみが表示されていますが、IE では正方形の長方形が表示されます。
私のヘッダーには、次のものもあります。
<!--[if IE 9]> <link href="css/ie9.css" rel="stylesheet" type="text/css" /> <![endif]-->
<!--[if IE 8]> <link href="css/ie8.css" rel="stylesheet" type="text/css" /> <![endif]-->
<!--[if IE 7]> <link href="css/ie7.css" rel="stylesheet" type="text/css" /> <![endif]-->
これらのスタイル シートに今すぐダウンロード セレクターを追加しようとしましたが、IE が表示されないようです。これらのテーマのいずれかに関する光は素晴らしいでしょう!