上下のレイアウトの隙間を調節するためmargin-topを使用しているのですが、たとえば10pxの場合IEはOKなのですが、Firefoxの場合２つのレイアウトが重なってしまいます。
逆に20pxの場合FirefoxではOKなのですが、IEの場合では隙間がありすぎになって今します。どうすれば両方のブラウザで同じ間隔の隙間を得られるのでしょうか？
よろしくお願いします。
No.5
75
10
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で調節しても２つのレイアウトが重なってしまいます。
それは、そもそものCSSの記述に問題があるのでは。
> てか、はてなさぁHTMLタグうてんのやけど？何とかしろよ伊藤！（CTO）
タグが通るフォームでタグを記述したいときは、表示したい部分をそのまま
<PRE>～</PRE>
↑このタグで囲んでみてください。
No.1
3344440
21pt
要素によっても違うかもしれないので、再現できるサンプルがあると分かりやすいのですが、
padding: 0px;
でパディングも調整してみてはどうでしょうか？
paddingでも同じです。
ありがとうございます。
No.2
14215
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では対応出来ないということであれば、ご一読ください。
無理でした。
ひとつ言い忘れていました。
二つのレイアウトの間に
<div style="clear:both"></div>
をいれないとFirefoxの場合いくらmarginで調節しても２つのレイアウトが重なってしまいます。
No.3
56271
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などを使ってない――なら、このバグの影響は単に大きさが変わるだけで「重なってしまう」という事態にはならないでしょう。
重なってしまうということはきっとそうではないだろうなぁ、と想像できるので、
が判らないとなんとも言えないなぁ、というところです。
htmlを記載したいなら、
>||
文句言う前に<strong>ヘルプを見ようよ!</strong> ていうか全角で書くなんて格好悪いよ。せめて実体参照で書こうよ。
||<
と書けば、
文句言う前に<strong>ヘルプを見ようよ!</strong> ていうか全角で書くなんて格好悪いよ。せめて実体参照で書こうよ。
こうなります。
参考まで。
No.4
46069
21pt
ご存知かも知れませんが、IEは規格通りに表示が出来ないダメなブラウザなんです。
こんな感じで差があります。
http://www.mable.ne.jp/~hp/csslayout.html
IE7ではこのバグは治っているらしいので、今後の事を考えたら規格通りに記述する方がいいでしょう。
で、IE7が普及するまではキッチリ並べようとしないで、スキマがあっても目立たないようなレイアウトにするのが無難かもしれません。
マージン、ボーダー、パディングをあまり使わない様に（調整しだいですが）すれば可能かも知れませんが、ご期待のレイアウトになるかはチョッと...
HTMLタグを書く場合は、はてな表記を使えば出来るのでは？
なるほど。ありがとうございます。
No.5
7510
ここでベストアンサー
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で調節しても２つのレイアウトが重なってしまいます。
それは、そもそものCSSの記述に問題があるのでは。
> てか、はてなさぁHTMLタグうてんのやけど？何とかしろよ伊藤！（CTO）
タグが通るフォームでタグを記述したいときは、表示したい部分をそのまま
<PRE>～</PRE>
↑このタグで囲んでみてください。
ありがとうございます。
No.6
56271
10pt
3の回答者です
ぐちゃぐちと書きましたがあの回答は、
>前の回答は「DTDでstrictを指定してFirefoxに合わせてレイアウトしたあとで、WinIE6で確認してみてはどうですか?」という意味だったろうと
私は思ったんですけどそうやってみたのですか?
その結果は?
><div> 要素を並べて上下に配置する(略)だけで「重なってしまう」という事態にはならないでしょう
から、
の情報がないとこの質問は多分解答に向けて前に進まないでしょうね。ちゃんとそれらをコメントしないとろくな回答がつかない(私の3の回答も含めてね)ままになるでしょうね。
と書いたんです。
その辺に対するコメントが無いので、事実そうなっちゃいました(またどうでもいいような回答をすることになったわけです)よ。
235
202
1
1
2
ありがとうございます。