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>

Firefox

FireFoxと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>

<html>含まれているdivにクラスを追加しましたが、タグに直接追加できます（ http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-nether/を参照）

そして、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 に答える