1

次のコードを検討してください: http://jsfiddle.net/A98vk/

ラッパー div の 2 つの角 (左上と右上) が丸くなっています。2 番目の div は直接ネストされており、背景のグラデーションを適用したいと考えています。

私が経験する問題は、css プロパティが存在しないか、またはborderに設定されている場合に、背景の線形グラデーション (webkit バージョンのみを追加して申し訳ありませんが、Chrome を使用しています) がトリミングされることです。プロパティをオンに戻すと、問題は解決します。00px [any params]

何が問題なのか誰か教えてください。を設定するだけでよいことは理解していますborder: 1px solid rgba(0,0,0,0)が、これは回避策のようです。

4

2 に答える 2

5

マージン崩壊が起こっています。stackoverflow でのマージンの崩壊については、たくさんの質問/回答があります。私は1つ(おそらくそれ以上)自分で答えました:CSSボーダーの追加により、HTML5 Webページでの位置が変更されます

基本的に、h1 のマージンは「崩壊」し、代わりに周囲のヘッダーに適用されます。背景はトリミングされません。ヘッダーは単純に小さくなります。

要素の間に何もない場合、要素のマージンは崩壊します。そこに境界線を追加すると、それらの間に何かが配置されるため、マージンの崩壊はありません。

マージンが崩壊するのを防ぐ他の方法など、これについて知っておくべきことがもう少しあります。上記の私の回答を確認するか、単にグーグルでより詳細な説明を確認してください。

于 2013-07-18T14:54:22.970 に答える
1

divに追加overflow:auto(またはhidden) して、トリミングを修正できます。.header

このデモを見る

于 2013-07-18T14:50:55.060 に答える