Question

浏览器之间的css3边界半径存在冲突。

#menu ul li:first-child {
    border-radius: 0px 8px 8px 0px;
}

#menu ul li:last-child {
    border-radius: 8px 0px 0px 8px;
}

<ul>
    <li><a href="#">الرئيسية</a></li>
    <li><a href="#">صفحتي</a></li>            
    <li><a href="#">كتبي</a></li>
    <li><a href="#">أصدقائي</a></li>            
    <li><a href="#">خروج</a></li>
</ul>

firefox

FireFox and Chrome

即问题

IE Problem

Answer 1

我怀疑这是因为rtl方向。

解决方案：使用条件为您的HTML添加一个类 - 例如：

<!--[if IE]><div dir="rtl" class="ie"><![endif]-->
<!--[if !IE]><!--><div dir="rtl"><!--<![endif]-->
<div id="menu">
    <ul>
        <li><a href="#">الرئيسية</a></li><li><a href="#">صفحتي</a></li><li><a href="#">كتبي</a></li><li><a href="#">أصدقائي</a></li><li><a href="#">خروج</a></li>
    </ul>
</div>
</div>

我已将该类添加到包含div，但您可以将其直接添加到<html>标记（请参阅http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/）

然后你的CSS会有这样的东西：

#menu li:first-child {
    border-radius: 0 8px 8px 0;
}
#menu li:last-child {
    border-radius: 8px 0 0 8px;
}
.ie #menu li:first-child {
    border-radius: 8px 0 0 8px;
}
.ie #menu li:last-child {
    border-radius: 0 8px 8px 0;
}

此处完整演示http://dabblet.com/gist/2774749 - 我在Chrome，Firefox，Opera和IE9中对其进行了测试并运行相同。

Answer 2

试试这个：

#menu ul li:first-child {
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

#menu ul li:last-child {
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

在执行常规命令

之前，最好定义特定于浏览器的css

Answer 3

在通过CSS不支持的边界半径中你必须使用Javascript 阅读本教程以获取有关IE中边框半径的完整帮助

http://davidwalsh.name/css-rounded-corners

边界半径即firefox chrome冲突

3 个答案: