我一直在尝试实现跨浏览器圆 Angular 的解决方案，即使该演示适用于所有浏览器，但当我尝试用我自己的代码实现它时，它适用于所有浏览器除了 IE8.
这是我的 CSS:
body { background:#ffffff url("images/bg.gif") repeat-x ;
font-family:verdana,helvetica,sans-serif ;
font-size:12px ;
color:#000000 ;
margin:0 auto ;
padding:0 ;
}
.clear { clear:both } /* clears floats */
/* #container defines layout width and positioning */
#container { width:1000px ;
margin:auto ;
position:relative ;
z-index:inherit ;
zoom:1 ; /* enables rounded corners in IE6 */
}
#header { width:1000px ;
height:75px ;
padding:10px 0px 10px 0px ;
}
#header-logo { float:left ;
width:255px ;
height:55px ;
background:url("http://template.sophio.com/images/logo.png") no-repeat ;
}
#header-phone { float:left ;
display:block ;
line-height:55px ;
background:url("images/header-phone-bg.png") no-repeat ;
background-position:0px 0px ;
font-size:28px ;
color:#900 ;
font-weight:bold ;
padding-left:50px ;
margin:0px 0px 0px 120px ;
}
#header-right { float:right ;
width:225px ;
}
#header-right-translate { display:block ;
text-align:right ;
background:#ffffff ;
line-height:26px ;
}
#header-right-social { display:block ;
text-align:right ;
background:#FF9 ;
line-height:24px ;
margin-top:5px ;
}
#navbar { width:1000px ;
height:32px ;
background:#9d9687 url("images/header-bg.gif") repeat-x ;
border:1px solid #494437 ;
-moz-border-radius: 11px 11px 0px 0px ;
-webkit-border-radius: 11px 11px 0px 0px ;
border-radius: 11px 11px 0px 0px ;
behavior: url("border-radius.htc");
}
这是我的 HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Two Column Right</title>
<link rel="stylesheet" href="../style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="header-logo"></div>
<div id="header-phone">888-563-2591</div>
<div id="header-right">
<div id="header-right-translate">
[Google Translate Widget Here]
</div>
<div id="header-right-social">
[Social Icons Widget Here]
</div>
</div>
</div>
<div id="navbar">text</div>
</div>
</body>
</html>
导航栏是我应用圆 Angular 的地方。
在 IE8 中，我的所有 Angular 都是圆 Angular 的，而我只希望左上角和右上角是圆 Angular 的(它们在除 IE8 之外的所有 Angular 中都显示正确)。
最佳答案
这个问题已经被 stackoverflow 上的其他人使用 CSSPIE 解决了:http://css3pie.com/
为了使圆 Angular 在 IE 8 中正常显示，圆 Angular 元素必须具有:
position: relative;
在CSS中设置。
参见:
还有: http://jc-designs.net/blog/2010/07/getting-border-radius-to-work-in-ie/ (有关 position:relative hack 的更多信息)
sass 库 Compass 也提供了跨浏览器的 border-radius，但我没有在 ie8 上使用它的经验
关于CSS 和跨浏览器圆 Angular ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10116456/