親divにボーダー半径を持つスライドボックスを開発しようとしています。Firefox では問題なく動作しますが、Safari と Chrome で問題が発生しました。
問題は、子要素が親 div の丸い境界線に重なっていることです。
http://jsfiddle.net/7KgEh/6/で例を見ることができます。サファリ、クローム、ファイアフォックスを見てください。子 div が親 div の丸い境界線と重なっている右側の違いがわかります。
私はインターネットを検索しましたが、ほとんどの投稿はそれを webkit のバグとして指摘していました。誰かが解決策を知っていますか？
overflow: hidden;丸みを帯びた境界線でコンテナー要素に追加するだけです。
丸みを帯びた角は正常に機能しています。 width:100%(ページの) を取得しているだけな<div class='box'>ので、表示されません。試しwidth:50%てみると、私の言っていることがわかるでしょう。ここでこのjsfiddleを試してください
その背景と対話する必要がない場合は、z-index で埋めることができます。
背景を埋めて、ボタンを上に移動して兄弟にし、余分な行を書いてそれらを整列させます. これが表示目的である場合、これは全体的により柔軟になります (ボタンがスロットに重なるようなものも可能になります)。構造上の理由がある場合は、別のオプションが適している可能性があります。