0

ネット上では特定できないような IE6 のバグに遭遇しました。

基本的に、これは動作がトリガーされるときです。ブロック要素には、下を除くすべての側面に境界線があり、上/下のパディングがあります。その中に別のブロック要素があります。

私のコード全体は大きすぎてここに収まりませんが、次の簡単な例に絞り込みました。

<div style="border: 5px solid red; border-bottom: 0; padding: 5px;">
    <p>adasasasdas</p>
</div>
Following stuff

ここで問題になるのは、「次のもの」の位置 (それが何であれ) が奇妙に変更されることです。この場合、左に数ピクセル。

その奇妙な動作を無効にするには、下の境界線を維持するか、パディングを取り除くか、含まれている要素をインラインにすることができます。でもどっちも欲しい。それらをあきらめる前に、このバグに関する知識があるかどうか、および代替の修正があるかどうかを確認したかった.

ありがとう！

4

4 に答える 4

1

これはバグに対するかなり良い修正です:

<div style="border: 5px solid red; border-bottom: 0; padding: 5px; font-size:0">
    <p style="font-size:16">adasasasdas</p>&nbsp
</div>
Following stuff

基本的に、IE6 が正しくレンダリングするには、div の最後にインライン テキストが必要です。  が一番下に余分な行を追加したので、 でフォント サイズを 0 に変更し、divで 16 (または通常使用するもの) に戻しました<p>。これによる div の高さへの影響はごくわずか (すべての主要なブラウザーで約 2 ピクセル) ですが、ユーザーにはまったく気付かれないはずです。または、 でline-height変数を 0% に変更しdivてから、 で 100% に戻してみpてください。divfont-size

于 2009-11-03T15:30:58.267 に答える
0

これはあなたを助けるかもしれません

<div style="border-left: 5px solid red; border-top: 5px solid red; padding: 0px;"> <p style="margin:0px; padding:10px;">adasasasdas</p> </div> Following stuff

<p>パディングが必要な場合は、タグのパディングを調整します

于 2009-11-03T10:37:49.830 に答える
0

私の修正は

<div style="border: 5px solid red; padding: 5px; padding-bottom:4px; border-bottom: 1px solid white;">
    <p>adasasasdas</p>
</div>
Following stuff

ただし、文脈によっては当てはまらない場合があります

于 2009-11-03T10:25:22.543 に答える
0

ねえ、私はこれが古いことを知っていますが、私もこのバグと戦って数時間を過ごしました (実際、それがボーダーボトム + パディングボトムのせいであると理解するのにこれほど長い時間がかかりました...これは残念です何を検索すればよいか分かっていれば、もっと早く見つけられたはずです）。

とにかく、これがie6のhasLayoutの問題のさらに別の症状であることに突然気づきました。私の目的のために、問題のあるdivに「zoom：1」を追加すると、突然魔法のように修正されました。これには、フォントサイズや行の高さなどに悩まされないという利点があります。

于 2010-08-02T18:34:40.120 に答える