cssデザイン - Mozilla で見る -コミュの各ブラウザにおけるCSSの振り分け

テーブルを使わないでCSSでレイアウトを作ろうと思っているのですが、いろいろやってみるとmarginとpaddingに関して、ブラウザによって認識の仕方が違う事に気づきました。
同じレイアウトを作ろうとして、marginやpaddingを使わないといけない場合は、cssファイルを振り分けないといけないと思うのですが、どのようにして振り分けたらいいのでしょうか？

よろしくお願いします。

コメント(5)

最初
全て
最新の40件

[1] mixiユーザー 02月18日 13:43

ブラウザ別にcssファイルを振り分ける外部java scriptファイルを用意してhtml内に記述するという方法がありますよ。
noscriptでの記述もお忘れなく。

参考例:
http://www.fromdfj.net/html/changestyle.html

[2] mixiユーザー 02月18日 13:52

marginとpaddingに違いが……というのは、例えばul/ol/liなどに関するものでしょうか？
だとすると、それは各ブラウザの「CSSの認識が異なる」せいではなく、「初期スタイル指定が異なる」ことが原因ですので、CSSを振り分ける必要はありません。

参考までに、私の場合は以下のようにして、各ブラウザの初期スタイル指定を完全に無視して好みの指定を適用させています。

ul, ol {
margin: 0;
padding-left: 2em;
}
li {
margin-left: 0;
padding-left: 0;
}

[3] mixiユーザー 02月18日 14:33

早速のレスありがとう御座います。

> Piroさん

下記のようなCSSソースになっているのですが、IEとOperaでは?の様に表示されるのですが、ネスケとfirefoxだと?の様になってしまうのです。
ですので、CSSを振り分けるのがいいのかと思ったのです。。。

こういった場合には、振り分け以外に回避する方法ってあるのでしょうか？？
まだ勉強を始めたばかりで分からない事ばかりで・・・。

よろしくお願いします。

参考ソースです。

/* ヘッダー */
#header{
width: 700px;
background-color: #FF0000;
}

/* コンテンツ */
#contents{
width:700px;
}

/* サイドナビ */
#sidenavi{
width: 200px;
background-color: #5C5CAD;
float: left;
}

/* メイン */
#main{
width: 500px;
background-color: #00FF00;
padding: 0px 10px 0px 10px;
float: left;
}

/* フッター */
#footer{
width: 700px;
background-color: #99CCCC;
clear: both;
}