2007年04月07日
widthとpaddingを同時に記述しない！
スタイルシートレイアウトにっとってクロスブラウザは避けては通れないモノ。記述によってはIE7とIE6の間にも解釈に違いが見られ、MacIEなどの旧ブラウザなどには泣かされた人は少なくないはず。そこで、スタイルシートレイアウトでのちょっとした工夫を紹介します。
ブラウザ間でのレイアウト崩れの大きな原因の一つに幅の指定があります。これは各ブラウザごと、幅に対する解釈の違いからくるもので、クロスブラウザへ対応するには避けては通れない問題です。私も最初の頃は、HTMLのソースをシンプルにスッキリさせると同時に、スタイルシート内もシンプルにしようと、一つの要素に色々と指定を詰め込んでしまって、二進も三進も行かなくなった…なんて事がよくありました。
同じような状況で悩んでいる方は以下を参考にしてみてください。
まずは、下記の例を見てください。
HTMLサンプル =========================================
<div>
<p>テキスト</p>
</div>
CSSサンプル =========================================
div{
width:200px;
padding-left:20px;
}
このようにwidthとpaddingを同時に指定すると、IEでは200ピクセルで表示されますが、Firfox等ではwidth＋paddingの220ピクセルで表示されます。幅に余裕のあるデザインであれば構わないのですが、float指定を組み込んでいたり、ピクセル単位でレイアウト構成している場合は、無残にも崩れてしまう原因となってしまいます。
ブラウザ間の解釈の違いは実にやっかいですね・・・。
と、嘆かずに一手間かけてやります。
CSSサンプル =========================================
div{
width:200px;
}
div p{
padding-left:20px;
}
このようにwidthとpaddingを分けて記述すれば、どのブラウザでも同じ幅で表示されます。
これはwidthとborderを同時に指定した場合も同様のことが言えます。IEではwidth＋borderの幅が表示され、Firfox等ではwidth＋borderの幅が表示されてしまいます。この場合でも一手間かけてやれば解決！外側でwidthを設定して、内側でborder設定と、区分してやればいいのです。
今回のポイント！
width(height)と左右(上下)paddingの指定を同時にしない！！
同じような状況で悩んでいる方は以下を参考にしてみてください。
まずは、下記の例を見てください。
HTMLサンプル =========================================
<div>
<p>テキスト</p>
</div>
CSSサンプル =========================================
div{
width:200px;
padding-left:20px;
}
このようにwidthとpaddingを同時に指定すると、IEでは200ピクセルで表示されますが、Firfox等ではwidth＋paddingの220ピクセルで表示されます。幅に余裕のあるデザインであれば構わないのですが、float指定を組み込んでいたり、ピクセル単位でレイアウト構成している場合は、無残にも崩れてしまう原因となってしまいます。
ブラウザ間の解釈の違いは実にやっかいですね・・・。
と、嘆かずに一手間かけてやります。
CSSサンプル =========================================
div{
width:200px;
}
div p{
padding-left:20px;
}
このようにwidthとpaddingを分けて記述すれば、どのブラウザでも同じ幅で表示されます。
これはwidthとborderを同時に指定した場合も同様のことが言えます。IEではwidth＋borderの幅が表示され、Firfox等ではwidth＋borderの幅が表示されてしまいます。この場合でも一手間かけてやれば解決！外側でwidthを設定して、内側でborder設定と、区分してやればいいのです。
今回のポイント！
width(height)と左右(上下)paddingの指定を同時にしない！！
