6

いくつかの子要素を使用して親要素を作成し、属性divに応じてJavaScriptで幅を計算しdata-valueます。

すべての子の計算された幅を合計すると、100％になります。しかし、何らかの理由で、子は実際には親の幅の100％を占めることはありません。白いピクセルの一部は、最後の子の直後に表示されます。

これはこれを示すフィドルです：http：//jsfiddle.net/tqVUy/42/

ChromeとFirefoxは問題なくレンダリングしますが、SafariとOperaでこの問題に直面しています（下の画像を参照してください）。

異なるブラウザ間でレンダリングされたコンポーネント

それに加えて、overflow子要素が親とオーバーラップするため、プロパティは期待どおりに機能しませんdiv（ここでも、SafariとOperaにのみ関連します）。

質問：

  1. 子供を親に合わせる他の（正しい）方法はありますか？
  2. 角が丸くoverflow: hidden、親の場合、すべてのブラウザで同じように見せることはできますか？
4

2 に答える 2

2

私もそのような問題に直面しています。そのため、子にも境界半径を定義します。このように書いてください：

#component > div:first-child{
    border-radius:30px 0 0 30px;
}
#component > div:last-child{
    border-radius:0 30px 30px 0;
}

これをチェックしてくださいhttp://jsfiddle.net/tqVUy/49/

于 2012-09-17T10:19:20.623 に答える
1

追加されたcss： 

#component>div{height:100%;}
#component>div:first-of-type{border-radius:30px 0 0 30px;}
#component>div:last-of-type{border-radius: 30px;}

jsで編集： 

$('#component').children().not(':last').each(function () {

何が起こるか：
最後のdivは左にフロートせず、残っているスペースを埋めるだけです。コーナーの問題を修正するために、最初と最後のdivに丸いコーナーを追加しました。最後のdivは、実際には他のdivの後ろにあるため、隅々に30pxの半径があります（これはinspect要素で確認できます）。

デモ： http：
//jsfiddle.net/tqVUy/48/

于 2012-09-17T10:20:52.987 に答える