XHTML+CSS フレームワークを使用することには多くの利点がありますが、経験が浅いためか、考えが不明確であるためか、実際にいくつかの問題があります。まず、皆さんが検索する手間を省くために、私が遭遇した問題のいくつかを以下に書き留めておきます。
1. mozilla Firefox と IE の BOX モデルの解釈に一貫性がないため、2px の違いが生じます。 解決策:
div{margin:30px! important;margin:28px;}
これら 2 つのマージンの順序を逆に記述してはいけないことに注意してください。 Ajie 氏によると、この重要な属性は IE では認識されませんが、他のブラウザーでは認識されます。したがって、IE では実際には次のように解釈されます。
div{maring:30px;margin:28px}
を繰り返し定義すると、最後のものが実行されるため、単に margin:XXpx! important; と書くことはできません
。 IE5 と IE6 は、IE5 では矛盾します。 div{width:300px;margin:0 10px 0 10px;}div の幅は、300px-10px (右パディング)-10px (左パディング) として解釈されます。 div は 280px ですが、IE6 やその他のブラウザの幅は 300px + 10px (右パディング) + 10px (左パディング) = 320px として計算されます。現時点では、次の変更を行うことができます:
div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}
この /**/ が何なのかよくわかりません、私だけが知っています。 IE5とFirefoxはどちらもサポートされていますが、IE6はサポートされていません。わかる方がいらっしゃいましたら、教えてください。 :)
3. Mozilla では ul タグにデフォルトでパディング値がありますが、IE ではマージンのみが値を持つため、最初にそれを定義します:
ul{margin:0;padding:0;}
ほとんどの問題は解決できます。
4. スクリプトに関しては、xhtml1.1 では language 属性がサポートされていません。コードを
次のように変更するだけです。
5. BOX コンテナ内の float と text-align の方向を同じに設定する場合:
{float:left;text-align:left;margin:0 0 0 200px;}
次の変更を加えることができます:
{float :left; text-align:left;margin:0 0 0 200px;display:inline;}