CSS 在 IE7/IE8 中创建圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6941158/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating rounded corners in IE7 / IE8
提问by Balkar Kalsi
I am creating a rounded corners tabs, that works fine in IE9, Mozilla and Chrome, but not in IE7/IE8.
我正在创建一个圆角选项卡，它在 IE9、Mozilla 和 Chrome 中运行良好，但在 IE7/IE8 中不起作用。
Here is the code:
这是代码：
<div id="navbar">
<div id="holder">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
</div>
#navbar {}
#holder {
border-bottom:1px solid #000;
overflow:hidden;
}
#navbar #holder ul {
margin:0;
padding:0;
list-style:none;
margin-top:15px;
}
#navbar #holder ul li { }
#navbar #holder ul li a {
text-decoration:none;
float:left;
margin-right:5px;
border:1px solid #000;
padding:15px;
text-align:center;
width:90px;
border-bottom:none;
display:block;
behavior:url(border-radius.htc);
border-radius:5px 5px 0 0;
}
#navbar #holder ul li a:hover {
background:#C09;
color:#fff;
}
Can you please let me know the code so that it works for IE7/IE8 as well?
您能否让我知道代码，以便它也适用于 IE7/IE8？
采纳答案by tskuzzy
IE 7/8 do not support border-radius. I hear IE9 does though.
IE 7/8 不支持border-radius. 我听说 IE9 可以。
This site contains a hack for getting rounded borders in IE7/8 though: http://dimox.net/cross-browser-border-radius-rounded-corners/. You'll need to download border-radius.htc and put the following code in your CSS:
该站点包含一个用于在 IE7/8 中获得圆角边框的技巧：http: //dimox.net/cross-browser-border-radius-rounded-corners/。您需要下载 border-radius.htc 并将以下代码放入您的 CSS：
.rounded-corners {
behavior: url(http://yoursite.com/border-radius.htc);
}
回答by Vijay
Use jquery corner , it will work on all major browser
使用 jquery corner ，它适用于所有主流浏览器
http://jquery.malsup.com/corner/
http://jquery.malsup.com/corner/
You can even configure the corners the way you like!!
您甚至可以按照自己喜欢的方式配置角落！！
回答by sudip
There are following solutions :
有以下解决方案：
- CSSPie (http://css3pie.com/ but its compressed js file is 40 KB in size)
There is another solution using htc file for IE
behavior: url(http://yoursite.com/border-radius.htc); (almost 40 KB of size)The guide can be found here http://dimox.net/cross-browser-border-radius-rounded-corners/
Another solution that I personally recommend is :
jquery.corner.js (http://jquery.malsup.com/corner/)It's uncompressed js file is 10 KB in size.
- CSSPie（http://css3pie.com/ 但它的压缩 js 文件大小为 40 KB）
还有另一种使用 htc 文件的 IE 解决方案
behavior: url(http://yoursite.com/border-radius.htc); (almost 40 KB of size)该指南可以在这里找到http://dimox.net/cross-browser-border-radius-rounded-corners/
我个人推荐的另一个解决方案是：
jquery.corner.js (http://jquery.malsup.com/corner/)它的未压缩 js 文件大小为 10 KB。
回答by CSS Guy
border radius supported ie-7, ie-8, ie-9 via javascript check this tutorial how to show border radius in ie http://davidwalsh.name/css-rounded-corners
边框半径支持 ie-7、ie-8、ie-9 通过 javascript 检查本教程如何在 ie http://davidwalsh.name/css-rounded-corners 中显示边框半径
回答by Marius Schulz
The Internet Explorer supports the CSSborder-radiusproperty natively not until version 9.For lower version of IE, check the jQuery plugin kvijayhari mentioned, jQuery Corner.
Internet Explorerborder-radius直到版本 9 才原生支持 CSS属性。对于较低版本的 IE，请查看提到的 jQuery 插件 kvijayhari，jQuery Corner。
