如何在 IE8 (ie7, ie6) 中修复边框半径答案

【问题标题】：How to fix border radius in IE8 (ie7, ie6)如何在 IE8 (ie7, ie6) 中修复边框半径
【发布时间】：2012-03-30 12:52:13
【问题描述】：

我正在使用这个 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;
    }

它在 FF、Chrome、IE9（我认为）和 Safari 中完美运行... 但是在 IE8 中实在是太丑了，

有用户使用IE8，我试过.htc file 但不支持border-bottom-right-radius 和border-bottom-left-radius...

我正在寻找支持该功能的 JS 或 HTC 文件（或其他解决方案）我只需要IE8，但如果它同时支持IE6和IE7，那就太好了！

谢谢！

【问题讨论】：

您可以使用border-radius的简写属性，该属性将与PIE一起使用以使角落不同。
您不需要使用border-bottom-right-radius 等。使用简写属性：border-radius:50px 50px 4px 4px 等同于您发布的所有内容。您也可以对带有供应商前缀的代码执行此操作，因此您的整个代码实际上应该只有三行。另外，最好将标准（非前缀）声明放在供应商前缀声明之后（因为它是标准的，应该由支持它的浏览器使用）。

标签： javascript html css

【解决方案1】：

你可以试试CSS Pie。我没用过，所以不能保证。

不过，总的来说：我会放手的。没有圆角不会破坏 IE8 用户的体验。功能更强大的浏览器可以获得更好的体验。渐进式增强是一件美好的事情。

【讨论】：

只是要添加这个解决方案。你先添加了:)
hmm.. 我认为它确实破坏了我设计中的用户体验。因为很多用户从那里的学校/办公室来到我的网站。大多数学校和办公室的电脑都使用IE8。这就是为什么我想这样做。谢谢 CSS Pie，我要去试试。

【解决方案2】：

border-bottom-right-radius 浏览器支持：

border-bottom-right-radius 在 Opera 10 中按原样支持。

为了让它在 Firefox 和 Safari 中工作，你必须使用两个相关的属性：

-moz-border-radius-bottomright - 适用于 Firefox 3+

-webkit-border-bottom-right-radius - 用于 Safari 2+

Internet Explorer 9应该支持。

border-bottom-right-radius示例：

创建标准圆角：

border-bottom-right-radius:1em;
-moz-border-radius-bottomright:1em;
-webkit-border-bottom-right-radius:1em;

创建较浅的曲线：

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 特别说明： 不要忘记设置 -moz 和 -webkit 样式以及基本的border-bottom-right-radius，以便您的曲线显示在大多数现代浏览器中。

【讨论】：

【解决方案3】：

使用在 Photoshop 中制作曲线边框 .ping 图像并使用它.....因为border-radius-bottomleft 、border-radius-bottom right 等不适用于ie6-8 ....只有边框-radius 属性适用于 ....

使用 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*/ 在 ie6-8 中不起作用

【讨论】：