javascript 如何在 IE8 (ie7, ie6) 中修复边框半径
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9943359/
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
How to fix border radius in IE8 (ie7, ie6)
提问by Ibra038
I'm using this CSS:
我正在使用这个 CSS:
#main{
border-radius: 50px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-radius: 50px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius: 50px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
}
It works perfectly in FF, Chrome, IE9(i think) and Safari... But its soooo ugly in IE8 ,
它在 FF、Chrome、IE9(我认为)和 Safari 中完美运行......但它在 IE8 中非常丑陋,
There are users using IE8, i have tried the .htc filebut that dont support border-bottom-right-radius and border-bottom-left-radius...
有用户使用 IE8,我试过 .htc文件,但不支持 border-bottom-right-radius 和 border-bottom-left-radius...
I'm looking for a JS or HTC file that does support that (or an other solution for this) I only need it for IE8, but its great if it support IE6 and IE7 aswell!
我正在寻找支持该文件(或其他解决方案)的 JS 或 HTC 文件,我只需要它用于 IE8,但如果它也支持 IE6 和 IE7,那就太好了!
Thank you!
谢谢!
回答by chipcullen
You could try CSS Pie. I've not used it, so I can't vouch for it.
你可以试试CSS Pie。我没用过,所以不能保证。
Overall, though: I'd let it go. The absence of rounded corners won't break the experience for users in IE8. More capable browsers get the better experience. Progressive enhancement is a beautiful thing.
不过总的来说:我会放手的。没有圆角不会破坏 IE8 用户的体验。更强大的浏览器获得更好的体验。渐进增强是一件美丽的事情。
回答by twister_void
border-bottom-right-radiusBrowser Support:
border-bottom-right-radius浏览器支持:
border-bottom-right-radiusis supported as-is in Opera 10.
Opera 10 中原样支持border-bottom-right-radius。
In order to get it to work in Firefox and Safari, you have to use two related properties:
为了让它在 Firefox 和 Safari 中工作,你必须使用两个相关的属性:
-moz-border-radius-bottomright
- for Firefox 3+
-moz-border-radius-bottomright
- Firefox 3+
-webkit-border-bottom-right-radius -
for Safari 2+
-webkit-border-bottom-right-radius -
对于Safari浏览器2+
It should be supported by Internet Explorer 9.
Internet Explorer 9应该支持它。
border-bottom-right-radiusExamples:
边框右下角半径示例:
Create a standard rounded corner:
创建标准圆角:
border-bottom-right-radius:1em;
-moz-border-radius-bottomright:1em;
-webkit-border-bottom-right-radius:1em;
To create a shallower curve:
要创建更浅的曲线:
border-bottom-right-radius:1.6em 1em;
-moz-border-radius-bottomright:1.6em 1em;
-webkit-border-bottom-right-radius:1.6em 1em;
border-bottom-right-radius Special Notes: Don't forget to set the -moz and -webkit styles as well as the basic border-bottom-right-radius so that your curves show up in most modern browsers.
border-bottom-right-radius 特别注意事项: 不要忘记设置 -moz 和 -webkit 样式以及基本的 border-bottom-right-radius,以便您的曲线显示在大多数现代浏览器中。
回答by webslatesoftware
use make a curve border .ping image in photoshop and use it .....because border-radius-bottomleft ,border-radius-bottom right etc not work on ie6-8....only border-radius property work in ....
使用在 photoshop 中制作曲线边框 .ping 图像并使用它.....因为 border-radius-bottomleft ,border-radius-bottom right 等不适用于 ie6-8 .... 只有 border-radius 属性在 . ...
THAT IS NOT POSSIBLE TO SOLVE THAT PROBLEM USING BY CSS SO USE THAT TRICK
使用 CSS 无法解决该问题,因此请使用该技巧
background-color: #E8EDEF;
border-radius: 10px 10px 10px 10px;
display: block;
margin-left: 78px;
width: 591px;
behavior: url(pie/PIE.htc);
border-radius-bottom right*/ not working in ie6-8
边框半径右下角*/ 在 ie6-8 中不起作用