javascript - 跨浏览器的弧形边框

Question

在 div 上实现跨浏览器(ff，ie> 6，chrome，opera，safari) flex Angular 的最佳方法是什么。我找到了这篇文章 http://jonraasch.com/blog/css-rounded-corners-in-all-browsers我已经多次按照说明一步步进行，这是我的 CSS:

#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}

<!--[if lte IE 8]>
<style>
#content_wrapper{
behavior: url(template/css/border-radius.htc);
border-radius: 20px;
}
</style>
<![endif]-->

有人能指出我做错了什么吗，或者有没有更好的方法来实现同样的效果，它在除 IE 之外的所有浏览器中都可以工作

Answer 1

如果这是来自您的 HTML 文件的未经修改的片段，那么它不起作用的原因很明显:您正在使用 <style>另一个标签 <style> .

作为第一个测试，只需尝试将整个代码段替换为(删除 IE 特定 block !):

#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    behavior: url(template/css/border-radius.htc);
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}

如果可行，您可以将 IE 特定部分移动到单独的 <style> 中:

<style type="text/css">
#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}
</style>


<!--[if lte IE 8]>
<style type="text/css">
#content_wrapper{
    behavior: url(template/css/border-radius.htc);
    border-radius: 20px;
}
</style>
<![endif]-->

如果您仍然遇到问题，请尝试来自 google 网站的示例 zip 文件:http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip