2

序文：この質問が姉妹サイトに投稿されるべきだった場合は申し訳ありません。現在、SOの管轄下にあるものが何であるかを判断するのは困難です。

問題：連続する<div>要素に問題があります。時々 、それらの間に魔法のパディング/マージンがあり、その理由がわかりません。

IE7マジックパディングバグhttp://img689.imageshack.us/img689/6239/ie7bug.png

ご覧のとおり、コンテナのヘッダーdivと本体divの間にスペースがあります。私のDOM/CSSがどのように設定されているかを説明しましょう。

HTML

<div class="Product-IconView">
  <div class="PIV_TopCap"></div>
  <div class="PIV_Body">
      ...
  </div>
</div>

シンプルなコンテナ/子divのセットアップ、特別なことは何もありません。

CSS

トップキャップ：

.PIV_TopCap
{
    margin: 0px;
    padding: 0px;
    height: 10px;

    line-height: 1px; /* For IE so the text doesn't make the div higher */
    overflow: hidden;

    background-repeat: no-repeat;
    background-image: url(/Images/Controls/IconView/PIV-Regular-Top.png);
}

体：

.PIV_Body
{
    height: 266px;

    padding-left: 10px;
    padding-right: 10px;

    background-repeat: repeat-y;
    background-image: url(/Images/Controls/IconView/PIV-Regular-Body.png);
}

ご覧のとおり、非常に単純なCSSでもあり、過度に凝ったものはありません。<div>本体の中には、このdivと同じ原理に従った別の一連のアイテム（コンテナdiv、積み重ねられた子）があります。このような奇妙なパディングは表示されません。

私はIE9の開発者ツール（IE7標準が有効になっている）を使用してDOMを検査し、これを引き起こしている可能性があるものを確認しました（マージンが上部を押し上げるなど）

あなたがここで見ることができるように：

ボディハイライトhttp://img844.imageshack.us/img844/3448/ie7bug01.png トップハイライトhttp://img192.imageshack.us/img192/46/ie7bug02.png

divの境界はそのままで、正しいです。

結論これは非常に奇妙なバグです。以前のデザインで見たのですが、そこでも理解できませんでした。これは、私がこれまでこのプロジェクトで遭遇した唯一のIE7移行の問題です。私の知る限り、私はHTML標準に非常に近いものを使用しています（IEは場合によってはそれらを尊重しない傾向があることは知っていますが、計画ではこれを可能な限り正しく行うことです）。

あなたへの質問：

  • これを引き起こす可能性のあるものを探す必要がありますか？
  • 私は何か間違ったことをしていますか？もしそうなら、どうすればそれを修正できますか？
  • これを行うためのより簡単でより良い方法はありますか？
  • 私が見逃している明らかなものはありますか？

また

説明や詳細情報が必要な場合は、コメントに残してください。私がそれらを見つけたら答えます。（金曜日の遅い時間にこれを投稿します：o）。

4

1 に答える 1

1

答えが見つかったので、IE7 のヘルプを探している人のためにここに投稿します。

問題はfont-size、トップ div でした。私がline-height: 1px;設定している間、レンダリング エンジンは 12 ピクセルのフォントに 14 ピクセルを割り当てました。overflow: hidden

これらの行が両方ともトップ div (テキスト行よりも小さい) にあることを確認するだけです。

font-size: 1px; line-height: 1px;

...問題を修正します。

IE7 は line-height にあまり従わないようです。

于 2011-02-07T18:12:34.933 に答える