CSS


上下のレイアウトの隙間を調節するためmargin-topを使用しているのですが、たとえば10pxの場合IEはOKなのですが、Firefoxの場合2つのレイアウトが重なってしまいます。

逆に20pxの場合FirefoxではOKなのですが、IEの場合では隙間がありすぎになって今します。どうすれば両方のブラウザで同じ間隔の隙間を得られるのでしょうか?

よろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録:2006/12/19 23:28:54
  • 終了:2006/12/26 16:45:27

ベストアンサー

id:ddate No.5

ddate回答回数75ベストアンサー獲得回数102006/12/20 11:11:38

ポイント33pt

IEとfirefoxの表示の差だけだというなら、アンダースコアハックを使ってみてはどうでしょう。

アンダースコアを文頭につけると、firefoxではCSSではないものとして読まれないのにIEは読んでしまうというバグを利用したものです。

例)

margin-top: 10px;

_margin-top: 20px;

これで、IEではあとから記述された20ptを採用します。


「IE アンダースコアハック」などで検索するといっぱい出てきます。こんなのとか。

http://blog.worldending.jp/archives/2006/07/css.php


> 二つのレイアウトの間に

> <div style="clear:both"></div>

> をいれないとFirefoxの場合いくらmarginで調節しても2つのレイアウトが重なってしまいます。

それは、そもそものCSSの記述に問題があるのでは。


> てか、はてなさぁHTMLタグうてんのやけど?何とかしろよ伊藤!(CTO)

タグが通るフォームでタグを記述したいときは、表示したい部分をそのまま

<PRE>~</PRE>

↑このタグで囲んでみてください。

http://www.htmq.com/html/pre.shtml

id:esecua

ありがとうございます。

2006/12/20 23:58:55

その他の回答(5件)

id:b-wind No.1

b-wind回答回数3344ベストアンサー獲得回数4402006/12/19 23:35:40

ポイント21pt

要素によっても違うかもしれないので、再現できるサンプルがあると分かりやすいのですが、

padding: 0px;

でパディングも調整してみてはどうでしょうか?

id:esecua

paddingでも同じです。

ありがとうございます。

2006/12/20 23:59:16
id:blanccasse No.2

blanccasse回答回数142ベストアンサー獲得回数152006/12/20 01:09:59

ポイント16pt

DTD(文書型宣言)で、strict(HTML4.01厳密型)を指定しても駄目なのでしょうか?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

但し。ご存知かと思いますが、この場合、W3C非推奨要素、属性やフレーム設定を含めることは出来ませんが。。。

ちなみに、下記にWinIEのバグリストがありますので、上記DTDでは対応出来ないということであれば、ご一読ください。

http://cssbug.at.infoseek.co.jp/detail/winie.html

id:esecua

無理でした。

ひとつ言い忘れていました。

二つのレイアウトの間に

<div style="clear:both"></div>

をいれないとFirefoxの場合いくらmarginで調節しても2つのレイアウトが重なってしまいます。

2006/12/21 00:00:52
id:quintia No.3

quintia回答回数562ベストアンサー獲得回数712006/12/20 09:41:01

ポイント9pt

> DTDで厳密性を指定したところで変わるはずがないのですが。。

変わりますよ。

まぁ、「margin は関係ないだろう」という意味ならその通りなんですが。

http://cssbug.at.infoseek.co.jp/detail/winie/b001.html


height:100px;

width:200px;

padding: 20px;

border:30px;

margin:10px;

としましょうか。


6.0より前のバージョンの WinIE は、padding と border を"width の計算に含めてしまう"という CSSのバグがあったので、上記の指定をすると高さ120px,幅220pxになります。

Firefox,Safari ではCSSの仕様通り、高さ220px,幅320pxになります。

で、WinIE6, MacIE5などは、標準準拠モードと過去互換モード(後方互換モード)を持っていて、その切り替えはDTD(文書型宣言)で行います。

http://www.lucky-bag.com/archives/2004/11/xml_1.html

WinIE6ではDTDを変更すると見た目が変わります。


>現にやってみましたが無理でした。

ということですが、前の回答は「DTDでstrictを指定してFirefoxに合わせてレイアウトしたあとで、WinIE6で確認してみてはどうですか?」という意味だったろうと思います。


話を質問に戻すと、単に <div> 要素を並べて上下に配置する――postion,top,boyttom,left,rightなどを使ってない――なら、このバグの影響は単に大きさが変わるだけで「重なってしまう」という事態にはならないでしょう。

重なってしまうということはきっとそうではないだろうなぁ、と想像できるので、

  • どんな要素を使っているか?
  • 配置のためにCSSで位置をどの様に指定しているか?

が判らないとなんとも言えないなぁ、というところです。


htmlを記載したいなら、

>||

文句言う前に<strong>ヘルプを見ようよ!</strong> ていうか全角で書くなんて格好悪いよ。せめて実体参照で書こうよ。

||<

と書けば、

文句言う前に<strong>ヘルプを見ようよ!</strong> ていうか全角で書くなんて格好悪いよ。せめて実体参照で書こうよ。

こうなります。

参考まで。

id:tezcello No.4

tezcello回答回数460ベストアンサー獲得回数692006/12/20 09:48:37

ポイント21pt

ご存知かも知れませんが、IEは規格通りに表示が出来ないダメなブラウザなんです。

こんな感じで差があります。

http://www.mable.ne.jp/~hp/csslayout.html

IE7ではこのバグは治っているらしいので、今後の事を考えたら規格通りに記述する方がいいでしょう。

で、IE7が普及するまではキッチリ並べようとしないで、スキマがあっても目立たないようなレイアウトにするのが無難かもしれません。

マージン、ボーダー、パディングをあまり使わない様に(調整しだいですが)すれば可能かも知れませんが、ご期待のレイアウトになるかはチョッと...


HTMLタグを書く場合は、はてな表記を使えば出来るのでは?

id:esecua

なるほど。ありがとうございます。

2006/12/20 23:51:35
id:ddate No.5

ddate回答回数75ベストアンサー獲得回数102006/12/20 11:11:38ここでベストアンサー

ポイント33pt

IEとfirefoxの表示の差だけだというなら、アンダースコアハックを使ってみてはどうでしょう。

アンダースコアを文頭につけると、firefoxではCSSではないものとして読まれないのにIEは読んでしまうというバグを利用したものです。

例)

margin-top: 10px;

_margin-top: 20px;

これで、IEではあとから記述された20ptを採用します。


「IE アンダースコアハック」などで検索するといっぱい出てきます。こんなのとか。

http://blog.worldending.jp/archives/2006/07/css.php


> 二つのレイアウトの間に

> <div style="clear:both"></div>

> をいれないとFirefoxの場合いくらmarginで調節しても2つのレイアウトが重なってしまいます。

それは、そもそものCSSの記述に問題があるのでは。


> てか、はてなさぁHTMLタグうてんのやけど?何とかしろよ伊藤!(CTO)

タグが通るフォームでタグを記述したいときは、表示したい部分をそのまま

<PRE>~</PRE>

↑このタグで囲んでみてください。

http://www.htmq.com/html/pre.shtml

id:esecua

ありがとうございます。

2006/12/20 23:58:55
id:quintia No.6

quintia回答回数562ベストアンサー獲得回数712006/12/21 07:11:52

ポイント10pt

3の回答者です

ぐちゃぐちと書きましたがあの回答は、

>前の回答は「DTDでstrictを指定してFirefoxに合わせてレイアウトしたあとで、WinIE6で確認してみてはどうですか?」という意味だったろうと

私は思ったんですけどそうやってみたのですか?

その結果は?

><div> 要素を並べて上下に配置する(略)だけで「重なってしまう」という事態にはならないでしょう

から、

  • どんな要素を使っているか?
  • 配置のためにCSSで位置をどの様に指定しているか?

の情報がないとこの質問は多分解答に向けて前に進まないでしょうね。ちゃんとそれらをコメントしないとろくな回答がつかない(私の3の回答も含めてね)ままになるでしょうね。


と書いたんです。

その辺に対するコメントが無いので、事実そうなっちゃいました(またどうでもいいような回答をすることになったわけです)よ。

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

  • CSSでIEとFireFoxnでmarginがずれるのを解消する方法 人力検索 はてな ピックアップ 質問集 2006-12-21 14:39:48
    CSS 上下のレイアウトの隙間を調節するためmargin-topを使用しているのですが、たとえば10pxの場合IEはOKなのですが、Firefoxの場合2つのレイアウトが重なってしまいます。 逆に20pxの場合Fi
  • prima materia diary - CSSハック prima materia diary 2006-12-22 00:04:12
    基本なんだけど、自分で書いて確かめたこと無いのでこの機会にやってみよう。 まずは標準準拠モード。 http://materia.jp/demo/Strict.html ふむ。Firefox2 と IE6 で同じ表示。 次が後方互
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません