Border Radius的后备图像

时间:2013-11-08 14:54:38

标签: html css3 ie8-compatibility-mode

我正在使用border-radius来处理我正在开发的页面中的按钮。在IE8中,由于不支持边框半径,因此按钮显示为矩形而不是圆角矩形。为了帮助纠正这个问题,我添加了一个背景图片,希望它能够在IE8的情况下回退它。这似乎带来了两个问题:

1)它不会回落到图像,背景颜色似乎仍然覆盖图像 2)在较新的浏览器版Chrome等中,它不显示border-radius,默认为背景图像。

请参阅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]-->

我试图将download-now选择器添加到这些样式表中,但IE似乎没有列出。任何这些科目的任何亮点都会很棒!

0 个答案:

没有答案