- 締切済み
マージンのマイナスのバグ
http://allabout.co.jp/internet/hpcreate/closeup/CU20060427A/index2.htmでマージンのマイナスをつかったボックスの作り方が載っていますが、エクスプローラーでこの部分をそのまま使ってもボックスのラベルの上の部分が表示されません。ＦＩＲＥＦＯＸではちゃんと表示されているようですが、エクスプローラーでなんとか表示させることはできないでしょうか？
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- grizzlycat
- ベストアンサー率47% (21/44)
#3の者です。 補足ありがとうございます。 先日検証した際、仕事の休み時間にLinux上でソースを作成して同僚のWindowsで見てもらったのですがその際、IEのバージョンが7だったようでした。 大変申し訳ございません。 今、自宅で再度IE6とIE7で違いを確認したのですが、確かにIE6ではAllAboutのサンプルで作成したもの、記述して頂いたソースで作成したものとも表示が異常になりました。 width値を指定しないとboxで指定した枠が2重化しますし、 <?xml version="1.0" encoding="Shift_JIS"?>の有無によってもラベル上部が隠れるか否かが分かれました。 手元の参考書で見たところ、IE6ではマイナスマージンの重なり合いの際により上の階層(この表現で良いのか不安ですが)のboxに隠れてしまう仕様です。他のFirefox、Operaなどのブラウザでは問題は無いようです。 IE7で解決されているのでIE6でのバグとしてしょうがないものかも知れません。 参考書は技術評論社の「セオリー・オブ・スタイルシート」のP74～、「整形コンテクストのレイヤ」と言う項目です。 一点、今回の現象とは関係無い(？)のですが、頂いたソースでstyle記述がheadタグ外にあります。正しくはheadタグ内に配置されますが今回はどちらもブラウザで認識しているので原因とは関係ありませんね。 お力になれず申し訳ございません、改めて自身の勉強にもなりました。
- grizzlycat
- ベストアンサー率47% (21/44)
試しにIE6、FX2の環境で以下のソースを表示させました。 結果、どちらとも問題なかったのですがソースの記述に抜けている部分はございませんか？ <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> div.box { border: 2px solid #cc0000; margin: 0px 50px; } div.label { color:white; background-color:#cc0000; font-weight:bold; margin: -0.6em 1.5em 5px; /* 余白:上-0.6文字分,左右1.5文字分,下5px */ } </style> <title>test</title> </head> <body> <div class="box"> <div class="label">◆見出し</div> 上側の余白をマイナスにしてラベルのように見せた例 </div> </body> </html>
補足
このままコピーしてもダメでした。ＦＸならちゃんと表示するのですが。他のパソコンでもダメです。自分ですこし作ってみたのですが、何か問題があるでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>デザイン</title> </head> <style type="text/css"> div.box{ width:130px; border:2px solid #d0caca; margin:0 0 50px 30px; } div.label{ width:60px; color:white; background-color:#cc0000; font-weight:bold; margin:-10px 15px 0px 15px; } </style> <body> <div class="box"> <div class="label">題名1</div> 上側の余白をマイナスにしてラベルのように見せた例 </div> </body> </html>
- 345itati
- ベストアンサー率48% (795/1639)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> でも駄目かな？関係無さそうな気もしますが・・・。 ページの作成からいって、IEで確認出来ないものを紹介しているのはあり得ないと思うので、コピペミスとか・・・？ CSSとHTMLの記述位置を間違ってるとかいう事はありませんよね？ (当方只今Mac Firefoxにてログインしているので確認しようが有りません^^; 尚、Mac IEでは正常表示ですね。
補足
こちらのパソコンはＷＩＮＤＯＷＳで、ＩＥ６だとそうなります。ＦＩＲＥＦＯＸだと正常です。他の方法で表示させるしかないのでしょうか？
- 345itati
- ベストアンサー率48% (795/1639)
念の為、DOCTYPE宣言で標準準拠モードにしてますか？
補足
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ですよね？やっているんですが、ボックスからはみ出た部分が表示されないんです。
お礼
やはり、ＩＥ６のバグですか。ＦＩＲＥＦＯＸでは問題なかったのでソースには問題ないようですね。しようがないのであきらめようと思います。早くＩＥ７が普及することを願うしかないですね。ありがとうございました。