0

我在我正在开发的整个页面中使用边框半径作为按钮。在 IE8 中，由于不支持边框半径，按钮显示为矩形而不是圆角矩形。为了帮助纠正这个问题，我添加了一个背景图像，希望它能够在 IE8 的情况下回退到它。这似乎带来了两个问题：

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 似乎没有列出。对这些主题中的任何一个进行任何了解都会很棒！

4

0 回答 0