すべての主要なブラウザー (テスト済み: IE 9、Chrome、Firefox) で、border-radius のレンダリングにバグがあります。
何が起こるかというと、border-radius のメニュー バーがあり、そこにはいくつかのリンクの幅が背景色になっています。ボタンをメニューの形状内に保持するために、メニュー コンテナーにオーバーフローを非表示に設定しました。すべてがうまくいくまでは、角の端に小さな白い線が現れます.
ここで縮小テストケースを作成しました：http://dabblet.com/gist/3828561
これを克服するための解決策はありますか？ありがとう！
寸法に依存するソリューション...しかし、それはコンテンツ ホルダーではなくメニュー バーなので、問題ないでしょうか? とにかく、border-radius内側の要素を設定し、親に高さを与え、その高さの値をline-height内側の要素に使用することもできます。
高さ/行の高さを適用したら、使用する必要はありませんoverflow: hidden。
メニュー バーの境界半径は3pxであるため、次のように、最初のメニュー項目の適切な角に同じ丸みを適用します。
.outer .inner:first-of-type { border-radius: 3px 0 0 3px; }
そして、バーの対応する角をさらに丸くして、最初のメニュー項目の下に隠します。
.outer { border-radius: 10px 3px 3px 10px; }