geckoとIEのcssの違い

PHP

今まできづかなかった僕も僕だけどこいつら全然違うんですね。

divの重なりの違い

divの重なり方が全然違う。IEの場合は中に引っ張られて外が広くなるけど、geckoだと外は引っ張られない。
以下のHTMLとcssで試してみるとよく分かる。

<html>
<head>
	<link rel="stylesheet" href="./main.css" type="text/css">
</head>
<body>

<div id="outer">
	<div id="inner">
	</div>
</div>

<div id="countain"></div>

</body>
</html>

div#outer {
    height : 100px;
    width : 100px;
    background-color : #FF0000;
}

div#inner {
    height : 200px;
    width : 50px;
    background-color : #00FF00;
}

div#countain {
    height : 100px;
    width : 100px;
    background-color : #0000FF;
}
paddingが違う

paddingの考え方が全然違う。IEだとwidth-paddingで計算されているようだが、geckoだとwidth+paddingで計算される。
以下のHTMLとcssで試してみるとよく分かる。

<html>
<head>
	<link rel="stylesheet" href="./main.css" type="text/css">
</head>
<body>

<div id="outer">
	<div id="inner">
	</div>
</div>

</body>
</html>

div#outer {
    height : 100px;
    width : 100px;
    background-color : #FF0000;
}

div#inner {
    height : 50px;
    width : 50px;
    background-color : #00FF00;
    padding : 10px;
}
marginが違う

geckoだとmargin-topがなぜかうまくいかない。IEだとmarginが想像通りに動くがgeckoだとなぜかtopのみうまく動かない。
以下のHTMLとcssで試してみるとよく分かる。

<html>
<head>
	<link rel="stylesheet" href="./main.css" type="text/css">
</head>
<body>

<div id="outer">
	<div id="inner">
	</div>
</div>

</body>
</html>

div#outer {
    height : 100px;
    width : 100px;
    background-color : #FF0000;
}

div#inner {
    height : 50px;
    width : 50px;
    background-color : #00FF00;
    margin : 10px;
}

まとめ

みんなこれでどうやって見せ方を統一させているのかが全然分からない・・・。特にpaddingとか「+」と「-」では全然ちがってくるし。。。みんなどうやってるんだろうなぁ。ぱっと考えると、cgiでクライアントが何かを判別して、クライアントにあったcssを使用するようにコードを組むのが一番簡単そう。

ということで、今までIEでしか確認していなかったので、鉄板はgeckoでは動きません。というか、動くけど見た目がぐちゃぐちゃです。申し訳ありませんが、使用する場合はIEを使用していただきますようよろしくお願いします。