3

頭（、、、、など）の余白が崩れているという奇妙な問題がありますh1がh2、h3IE8h4でのみです。私は自分が抱えている問題を特定するためにかなりの時間を費やし、それをこの例に絞り込みました。

DOCTYPEこのバグを表現している間は、他のページオブジェクト（宣言を含む）を削除できないことはほぼ完全に確信しています。コードをできるだけコンパクトにするために、バグはdisplayプロパティを数回変更した後にのみ発生しますが、実際のページには、displayプロパティが変更されるたびに（つまり、「nav」が続く直後に）問題が発生します。

これをjsFiddleとして投稿しようとしましたが、結果ペインからは再現できませんでした。したがって、私は、可能な限り小さく/クリーンに書かれた、単純化されたテストケース全体をインラインで投稿します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Bug Test of IE8 Collapsing Margin problem</title>
   <style type="text/css">
      h2 {
         margin:                20px 0 15px -10px;
         background:            red;
      } h3 {
         margin:                10px 0 15px -10px;
         background:            green;
      } h4 {
         margin-bottom:         -15px;
         background:            blue;
      } .noShow {
         display:               none;
      }
   </style>
   <script type="text/javascript">
      function show(theDiv) {
         theDiv   = document.getElementById(theDiv);
         Div1     = document.getElementById('div1');
         Div2     = document.getElementById('div2');
         Div1.style.display   = 'none';
         Div2.style.display   = 'none';
         theDiv.style.display = 'block';
      }
   </script>
</head>
<body>
   <ul>
      <li><a href="javascript: show('div1');">Nav1</a></li>
      <li><a href="javascript: show('div2');">Nav2</a></li>
   </ul>
   <div id="div1">
      <h1>Head1</h1>
      <h2>Head2</h2>
      <h3>Head3</h3>
      <h4>Head4</h4>
      <br><br>
      Click on "Nav2," then "Nav1," then "Nav2" a second time to see the shift
      in header margins/padding.<br>

   </div>
   <div id="div2" class="noShow">
      <h1>Head1</h1>
      <h2>Head2</h2>
      <h3>Head3</h3>
      <h4>Head4</h4>
   </div>
</body>
</html>

マージンの崩壊とそれがこのように動作することになっている方法について少し読み始めましたが、その場合、なぜIE8がこの動作でテストした唯一のブラウザーであり、なぜ一貫性がないのですか？また、パディングを使用してマージンを切り替えて、折りたたみの問題が発生しない同様の結果を達成しようとしましたが、何か間違ったことをしない限り、それも効果がありませんでした。

宣言に応募overflow:hiddenしてみました。noShowこれで問題は解決しますが、デザインで使用できません。（例でこれを調整した場合でも、見た目が間違っており、配置に一貫性がありません。）

この問題を回避する方法について誰かが何か良い提案がありますか？DOCTYPE他の機能（疑似要素など）が失われるため、IE7モードをオフにして強制する必要はありません:before。

4

2 に答える 2

2

カイルは私の解決策にたどり着くために必要な情報を私にくれました、そして彼が私の特定のケースを解決するための重要な部分を私にくれたので、私はすでに彼の解決策を受け入れました。検索を簡単にするために、ここに特定の解決策を投稿します。

CSS、JS、およびHTMLを組み合わせて簡単な変更を加え、目的の結果を達成しました。投稿した例を基に、次の変更を加えました。

h2, h3, h4 {
   ...
   width: 100%;
}

function show(theDiv) {
   ...
   theDiv.style.Display = "inline-block";
}

さらに、私の特定の例には、複数のクラスが割り当てられたdivがありました。

<div id="div1" class="content">Initially Visible</div>
<div id="div2" class="content noShow">Initially Invisible</div>

複数のクラス割り当てを削除し、（さらに別の）ネストされたdivを作成することで、これを変更しました。

<div class="content">
   <div id="div1">Initially Visible</div>
   <div id="div2" class="noShow">Initially Invisible</div>
</div>

3つの要素すべての組み合わせ（そのうちの2つはKyleから提供され、3つ目は私の例の投稿には含まれていません）は、期待される出力をもたらしました。

于 2011-03-10T19:53:29.503 に答える
2

これはあなたのために働きますか？

http://jsfiddle.net/7qymJ/1/

編集：

http://jsfiddle.net/7qymJ/-IE8でエラーを再現します

于 2011-03-10T19:08:27.943 に答える