0

レイアウトにはyamlを使用し、有名なclearfix cssを使用して、フロートを含むコンテナーが確実に拡張されるようにしています。

Firefox 3、IE6、IE7、IE8、Opera 9、および Google Chrome ではすべて問題なく動作しますが、Firefox 1、Firefox 2、および SeaMonkey には問題があります。問題は、Web サイトで確認できるように、clearfix コンテナーが拡張しすぎることです。

http://www.slagalica.tv/game/mojbroj

以下は、Firefox 2とFirefox 3のレンダリングのスクリーンショットです。

更新: BrowserShots.org のスクリーンショット

残念ながら、統計によると、訪問者の 10% 以上が FF2 を使用しているため、この問題を単純に無視することはできません。clearfix CSS の一部を削除または微調整してみましたが、何をしてもタイマー DIV (緑) がページの残りの部分から大きなマージンで区切られています。

これを解決する方法を知っている人はいますか？

Update2: 最終的にあきらめて TABLE タグを付け、数分で問題を解決しました。したがって、HTML ソースを調べようとしないでください。問題はもはや明らかではありません。

4

4 に答える 4

1

したがって、positioniseverything の clearfix を促進する元の記事を見ると、著者は修正が古くなっているため、読者は sitepoint の記事を参照することを推奨していることに気付くでしょう。このサイトポイントの記事では、私が長い間使用してきた方法を指摘しています。

親にoverflow: hiddenを指定し、IEで「レイアウト」があることを確認すると、内部フロートがクリアされます。


<div id="wrapper">
     <div id="leftcol">
          Text
     </div>
     <div id="rightcol">
         text
     </div>
</div>

そして、対応する CSS:


#wrapper{
  overflow:hidden;
  width: 100%;
}
#leftcol{
  float:left;
  width: 50%;
}
#rightcol{
  float:right;
  width: 50%;
}

上記の例ではwidth: 100%、IE にレイアウトを与えるために使用しましたが、必要に応じて簡単に使用することもできzoom: 1ますheight: 1%。

clearfix をこの手法に置き換えてみると、問題は解決するはずです。

この手法で留意すべきことは、内部の幅に注意してください。そうしないと、クリッピングが発生する可能性があり、印刷スタイルシートのラッパーをオーバーフローとしてオーバーライドすることが重要です。表示されない場合、最初のページのみが印刷されます。しかし、私はこの方法を本番環境で何年もうまく使用しており、解決できない問題は一度もありません。

于 2009-08-10T12:58:34.773 に答える
0

これはバグのようで、新しいバージョンで修正されています。ただし、互換性を維持するには、CSSの代わりにテーブルを使用する必要があります。

于 2010-08-02T17:00:06.080 に答える
0

clearfix は、怠け者や執拗な純粋主義者のための単なるハックです。クリア div を必要な場所 (div の下部) に配置して、作業を進めます。

<div>
   ... floated content ...
   <div style="clear:both"></div>
</div>

ところで。これがセマンティクスを壊すと主張する純粋主義者は正しくありません。HTML 仕様では、 のセマンティックな意味は定義されていません<div>。最悪の場合、スタイル/構造が混在していますが、将来サイトが再設計され、純粋な css ソリューションが実用的になったときに、削除する負担はほとんどありません。

于 2009-08-09T13:32:51.080 に答える
0

私はブラウザショットを使用してそれを見て、FF2、3、およびクロムの違いが何であるかを理解しようと非常に懸命に努力しています. 私はそれを見ていません。

あなたのページを見て、これらの線に沿って何かをしてみませんか?

 <div id='wrapper'>
      <div id="leftcol">
           Text
      </div>
      <div id="rightcol">
          text
      </div>
      <div id="foot">
           text
      </div>
 </div>

そしてCSS：

 #wrapper{
      min-height:1%; //to fix IE6 floats escaping ancestor div
 }
 #leftcol{
      float:left;
 }
 #rightcol{
     float:left;
 }
 #foot{
 clear:both;
 }
于 2009-08-09T17:06:51.027 に答える