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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 08:18:37  来源:igfitidea点击:

How to fix border radius in IE8 (ie7, ie6)

javascripthtmlcss

提问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 中不起作用