如何在IE8（ie7，ie6）中修复边框半径问题

Question

我正在使用这个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文件，但它不支持border-bottom-right-radius和border-bottom-left-radius......

我正在寻找一个JS或HTC文件来支持它（或其他解决方案） 我只需要它适用于IE8，但如果它也支持IE6和IE7那就太好了！

谢谢！

- Ibra038

---

您可以使用边框半径的简写属性，该属性可与 PIE 一起使用以使角落不同。 - zrooda

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

Answer 1

你可以尝试使用CSS Pie。我没有使用过，所以不能保证它的可靠性。 总体而言，我会放弃圆角边框。在IE8中，缺少圆角不会破坏用户的体验。更先进的浏览器将获得更好的体验。渐进增强是一件美妙的事情。

- chipcullen

---

刚打算添加这个解决方案。你先添加了 :) - Muhammad Sannan Khalid

嗯...我认为这会破坏我的设计对用户的体验。因为很多用户是从学校/办公室访问我的网站的，而这些地方大多数电脑使用IE8浏览器。这就是为什么我想这样做的原因。感谢CSS Pie，我会尝试一下。 - Ibra038

Answer 2

使用Photoshop制作曲线边框的.ping图像并使用它......因为border-radius-bottomleft，border-radius-bottomright等在ie6-8上无法工作....只有border-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中无法工作

- webslatesoftware

Answer 3

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，以便在大多数现代浏览器中显示曲线。

- twister_void