1

我在浏览器之间的 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>

火狐

火狐和 Chrome

即问题

IE问题

4

3 回答 3

1

我怀疑这是因为 rtl 方向。

解决方案：使用条件为 IE 的 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 中的工作方式相同。

于 2012-05-23T12:06:08.980 回答
0

尝试这个：

#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 总是更好

于 2012-05-23T09:38:30.130 回答
-1

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

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

于 2012-05-23T09:50:27.053 回答