0

私は新しい財団のためのサイトを設計していて、それを完成させるための私の締め切りとして4月15日を設定しました。コンテンツの編集とデザインの微調整を除いて、準備はできています。微調整では、誰かに解決を手伝ってもらいたいという厄介な小さな問題に取り組んでいます。問題は単純にこれです。サイトの構造の分割は、周囲に境界線がない限り、機能したいように機能しません。これほど不安定なものを見たことがありません。

この問題は、要素がレイアウト内でどのように相互作用するかに関連しているようです。まず、背景画像を保持するhtmlタグ、向こう側にいくつかの建物がある小川のjpeg、背景画像の下部に配置された分割タグ(#greengrass)によって作成された緑の草の木立があります。div#greengrassは、コンテンツdivがその上にあり、長くなるにつれて下に伸びるようにスタイル設定されています。この#greengrass要素は、周囲に境界線がない限り、厄介な動作をします。

具体的には、境界線を削除すると、背景画像の終了位置から開始するように配置されていても、上向きに投影されて背景画像を覆います。したがって、上向きに投影すると、ページ全体の背景が緑色になります。しかし、境界線があると、小川の背景画像が晴れた春の太陽のように明るく輝いています。

したがって、私は1つの質問があります:部門の境界の有無がその動作に影響を与えるのはなぜですか?財団のテストサイトへのURLは次のとおりです:http://postmaterial.org/tests/signin-ap.php。上部中央に、境界のある効果と境界のないdiv#greengrass効果を切り替えることができるリンクを追加しました。タグの動作の理由がわからないので、説明をいただければ幸いです。ありがとう。

4

2 に答える 2

0

あなたの質問に答えるには:「部門の境界線の有無がその動作に影響するのはなぜですか?」私は(彼の答えが述べたように)マージンの崩壊が問題であるという ichao に同意します。

border-top: 1px solid #009900ただし、マージンの崩壊を防ぐために必要なのは上部の境界線だけであるため、解決策は a のみを保持することだと思います。これにより、水平スクロール バーが表示されなくなります。

于 2012-04-07T17:49:51.510 に答える
0

#greengrass の境界がなければ、その子の負の margin-top が崩壊し (そして構造全体が見えなくなり、上部に引っ張られ)、その結果、#greengrass はもはや top によって十分に押し下げられません。

この場合、display:inline-block または display:table または float:left のように、border はマージンの崩壊を防ぎます (overflow:hidden はここではオプションではありません)。古い IE では、zoom:1 のような任意の haslayout トリガーで行う必要があります。しかし、私はそれをテストしませんでした。

于 2012-04-07T17:21:49.230 に答える