一部のブラウザーでは、特に要素がフローティングされている場合にマージンに問題があることに気付きました。たとえば、私がやっているこの Web サイトは Firefox では問題ないように見えますが、IE7 ではマージンが完全に台無しになっているようです。また、いくつかの Linux ブラウザでもテストしましたが、同様の間違いを犯すものもあります。
私が知る限り、これは FF3.0 では問題ないようです。FF2 や IE6 ではまだ見たことがありません。なぜこれが起こるのですか？指定されたマージンを持つフローティング DIV を持っているためですか?
避けるべきこと、または別の方法で行うべきだったことはありますか?
編集：私のタグが失敗の原因だったようです。CSS で定義されておらず、フロートがあり、マージンと組み合わされた に画像を配置しました。これらはすべてを台無しにし、私はこれらをやり直さなければなりません。
また、代わりに XHTML Strict を使用すると、いくつかの問題が発生しました :) 皆さん、ありがとうございました! 私は自分でこれを修正しようとします:)
margins を使用しても問題はありません。
古いバージョンの IE には 1 つのバグがあり、それだけでは、CSS のコア レイアウト機能の 1 つを使用しない理由にはなりません。具体的には、IE でオブジェクトをフロートさせ、同じ方向にマージンを与えると、このバグが発生します。たとえば、次のようになります。
.whatever {
float: right;
margin-right: 5px;
}
レイアウトに応じて、さまざまな方法でこれに対処できます。1 つの方法は、ボックスの周りに別のボックスを追加divし、その上にパディングを使用して、マージンと同じスペースを複製することです。
CSS フレームワーク (Blueprint CSS、960 Grid など) にはいくつかのマージン、パディング、その他の一般的な HTML 要素のリセットがあるため、何らかの形式の CSS フレームワークを使用することをお勧めします。フレームワークを使用すると、クロスブラウザー開発がより簡単になることがわかるはずです。
ブラウザが異なれば、ボックス モデルを処理する方法も異なります。ほとんどの場合、FF、Chrome、または IE8 で適切に表示されるサイトでも、IE6 および 7 では問題が発生する可能性があります。この問題を回避するには、すべてのデフォルトのマージンとパディングを 0 に設定します (特定の要素で必要に応じて調整します)。 ):
*{マージン:0px; パディング: 0px; } //最も単純なルール...
CSS リセットの詳細については、http: //meyerweb.com/eric/tools/css/reset/を参照してください。
次に、条件付きコメントを使用して IE7 と 6 に異なるスタイルを適用します。