5

CSS でスタイル設定された div タグがあります。パディングを 10 ピクセル (パディング: 10 ピクセル) に設定しました。Firefox と IE7 では希望どおりに動作しますが、IE6 では下部に追加のパディングが追加されます (約 2 ～ 3 ピクセルだと思います)。ここで何が起こっているか知っている人はいますか？

[アップデート]

私が話しているdivタグには背景画像があります。背景画像を削除すると、下部の余分なパディングが消えます。何か案は？

[別の更新、コード サンプル]

div タグに適用される CSS は次のとおりです。

.user-info{
    margin-top: 20px;
    margin-right: 20px;
    padding: 10px;
    background-image: url("../img/user_panel_bg.png");
    float:right;
    border: 1px #AAAAAA solid;
    font-size:12px;
}
4

6 に答える 6

17

あなたのdivに画像はありますか？画像がある場合、IE 6 にはバグがあり、div 内の空白が下部に余分なパディングを作成する可能性があります

余分なパディングが表示されます

<div>
<img src="myimage.jpg">
</div>

HTML を次のように変更しても、余分なパディングは表示されません。

<div><img src="myimage.jpg"></div>
于 2008-12-12T03:44:58.190 に答える
4

positioniseverything.netサイトと、IE の問題と回避策に関する記事を参照することを強くお勧めします。holly hack セクションを見てください - そこに答えがあると思います。

[編集 - 追加] 3px の問題、説明、修正についてはこちらをご覧ください

ボックスの設定とブラウザーの違いについては、sitepoints ボックス モデルの記事も良い洞察を提供します。

于 2008-12-12T03:37:16.737 に答える
2

DIVオーバーフロー を隠してみましたか?overflow:hidden;

display: inline;編集：水平方向の押し出しについて話している場合も試してみてください。

于 2008-12-12T03:40:52.517 に答える
1

フォント サイズが問題を引き起こしていないことを確認します。コンテナー要素内にテキストがなくても (たとえば、伸縮可能なコンテナーのボトム キャップの場合)、IE6 はボックスの高さをフォント サイズよりも小さくしません (明示的な高さが設定されていても)。

たとえば、HTML がある場合:

<div class="box">  
  <h1>Heading</h1>  
  <p>This is the main content.</p>  
  <div class="bottom"></div>  
</div>

...次の CSS が必要になります。

<style type="text/css">
  .box {
    background: url(bg-middle.jpg) repeat-y;
  }
  .box h1 {
    background: url(bg-top.jpg) no-repeat;
  }
  .box .bottom {
    background: url(bg-image.jpg) no-repeat;  /* bottom cap image */
    height: 10px;                             /* height of your bg image */
    font-size: 1px;                           /* for IE6 */
  }
</style>
于 2009-02-09T16:52:47.580 に答える
0

また、 CSS リセット スタイル シートのようなものを見ることもできます。これにより、ブラウザ間で合理的に一貫したデフォルトを設定できます。

于 2008-12-12T04:07:58.517 に答える
0

'margin' または 'border' プロパティの可能性がありますか?

于 2008-12-12T03:44:46.207 に答える