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 file但不支持border-bottom-right-radius和border-bottom-left-radius ......

我正在寻找支持它的JS或HTC文件（或其他解决方案）我只需要它用于IE8，但如果它支持IE6和IE7那么它很棒！

谢谢！

Answer 1

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

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

Answer 2

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

在 Opera 10 中支持

border-bottom-right-radius 。

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

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

如何修复IE8中的边界半径（ie7，ie6）

3 个答案: