人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSS

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

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

よろしくお願いします。

●質問者: esecua
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS firefox IE margin TOP
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● b-wind
●21ポイント

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

padding: 0px;

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

◎質問者からの返答

paddingでも同じです。

ありがとうございます。


2 ● blanccasse
●16ポイント

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

◎質問者からの返答

無理でした。

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

二つのレイアウトの間に

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

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


3 ● quintia
●9ポイント

> 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などを使ってない――なら、このバグの影響は単に大きさが変わるだけで「重なってしまう」という事態にはならないでしょう。

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

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


htmlを記載したいなら、

>||

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

||<

と書けば、

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

こうなります。

参考まで。


4 ● tezcello
●21ポイント

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

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

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

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

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

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


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

◎質問者からの返答

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


5 ● ddate
●33ポイント ベストアンサー

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

◎質問者からの返答

ありがとうございます。


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ