Question

以下是我的HTML代码......

Html代码：

<div class="fotter" >
&nbsp;&nbsp;&nbsp;&nbsp;Copyright&copy;2012                        
<span style=" float:right;">
<strong>Privacy Policy</strong>&nbsp;&nbsp;                
<strong>Contact Us</strong>&nbsp;&nbsp;                
<strong>Edumemn</strong>&nbsp;&nbsp;
</span>
</div>

和

CSS代码：

.fotter{
padding:10px 0 5px 0;
margin:0 auto; margin-bottom:10px;
background-image:url(../img/fotter.jpg);
background-repeat:repeat-x;
height:30px; width:1037px;
border:0;
outline:0;
float:left; font-family: Verdana, Geneva, sans-serif; font-size:12px;   
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
box-shadow: 0px 1px 2px #000;
-webkit-box-shadow: -1px 0px 2px #000;
-moz-box-shadow: 0px 5px 2px #000;
}

这是我的网站链接..http：//nerflek.net/PSD到HTML /

我的问题是..在Firefox中它显示了带有阴影部分的圆形框。但是在Internet Explorer 8中它没有显示任何阴影或圆角框。

有没有人帮我这个。
在此先感谢:-)

Answer 1

原因是border-radius isn't supported by IE8。

对于这个旧浏览器，“解决方案”是将图像用于角落，或者更合理地说，让不升级的用户具有方角。

Answer 2

IE8不支持Border -radius，一种方法是使用插件，这个简单有效， http://jquery.malsup.com/corner/

Answer 3

另一种方法是使用ie的目标css。

你可以像

一样添加它

<head>
<link rel="stylesheet" type="text/css" href="normal.css" />
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
</head>

在你的ie.css中，你可以添加背景作为图像。

ie.css

div#samepagecontainer {
..
..
background : #aaa url(/path/to/image.file) no-repeat top left;
..
}

CSS3圆形框和阴影问题

3 个答案: