HTMLはここでうまく

が表示されない問題が一番上に「余分な」スペースが表示されていることであるFirefoxの（10）HTMLはここでうまく

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <style> 
      * { margin: 0; padding: 0; } 
      .block6 { float: left; margin: 0 10px; width: 460px; } 
      .block { position: relative; } 
      .block:after { 
       clear: both; 
       content: ""; 
       display: block; 
       margin-bottom: 40px; 
      } 
      header { margin-bottom: 40px; } 
      .wie { text-align: center; } 
      .w { 
       margin: 0 auto; 
       padding: 0 10px; 
       text-align: left; 
       width: 960px; 
      } 
     </style> 
    </head> 
    <body> 
     <header> 
      <div class="wie"> 
       <div class="w"> 
        <div class="block"> 
         <div class="block6"> 
          aa 
         </div> 
         <div class="block6"> 
          bb 
         </div> 
        </div> <!-- block --> 
       </div> <!-- w --> 
      </div> <!-- wie --> 
     </header> 
    </body> 
</html>

でうまく表示されないHTMLの一部です。設定した場合：

header { 
    margin-bottom: 0; 
}

余分なスペースが消えます。エラーはブロックまたはブロック6クラスにあると思います。なにか提案を？

Chromeではよく表示されます。

編集：ここでは

はリンクです：http://jsfiddle.net/wARzA/

出典

2012-03-08 mneri

実際の例へのリンクはおそらく応答を得るのに役立ちます。 –

ブラウザ間で一貫した結果を得る方法は、Yahoo（[YIU]（http://developer.yahoo.com/yui/reset/））または[エリックマイヤー]（http://meyerweb.com/eric/tools/css/reset/）。これは問題を解決するものではなく、それ自体がいくつかの小さな課題を抱えていますが、ブラウザをより多くのレベルのCSSのプレーフィールドに導きます。 –

これは奇妙なバグですが、上の境界線を設定するなど、多くのことがバグを消滅させます。おそらく最もきれいな方法は次のとおりです。

header { min-height: 1px; }

出典

2012-03-08 21:44:52

それは動作します！だからバグです...私は間違いを探してページのコードをカットするのに4時間を費やしました。そして...それはバグです。：|非常に非常に非常にありがとう！ – mneri

私はバグの原因を尋ねるつもりだったが、ヤコブがうまく説明しているように見える。 – stommepoes

私はここにバグを提出しました：https://bugzilla.mozilla.org/show_bug.cgi?id=734279うまくいけばそれは対処されるだろう。 – Jacob

は、ここで問題です。ヘッダーの下余白は40pxです。内部の内容はすべて浮動しているので、ヘッダーは決して高さを占めることはありません。そのため、の下にの余白が表示されます。

余白をパディングに置き換える作業。 See this jsFiddle。

出典

2012-03-08 21:27:41 Jacob

ご返信ありがとうございます。しかし、これを参照してくださいhttp://jsfiddle.net/warzA/ **コンテンツの高さ**！ – mneri

「

...

」の末尾に「

」を追加しても、フローティング要素だけが含まれていない場合でもエラーは解決しません。 – mneri

答えて

関連する問題