- ベストアンサー
ieとfirefoxでdiv枠に２pxのズレ
- 現在下記のHTMLを作成致しましたが、CSSにてfirefoxとchomeに合わせるとieではdiv枠が2px程左右にズレが生じてしまいます。
- ieに合わせると逆の現象が生じます。何が原因なのか判りません。
- 具体的にどのように解決すれば良いのでしょうか。お知恵をお借りしたく存じます。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IE側が間違った解釈をしています。 DOCTYPEを <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> に変更すること。 また、さすがなtransitionalでは古いので <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> としてHTML4.01strictで作成する。 1999年『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 XHTML1.1、HTML5ではstrictと宣言しなくてもstrictしかなくなので。 ※原因は、IEはウェブ標準ではない古いIE向けに作成されたページを見るための ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 互換モードがあり、<DOCTYPE>でその判断をしています。他のすべてのブラウザや新しいIEは標準モードですから、齟齬が生じるのです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> のものをstandard.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> のものを、Quirks.htmlと言う名前で保存して、IEで表示してみてください。 [サンプル] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- div.header,div.section,div.footer{width:80%;margin:0 auto;position:relative;} div.section:before{content:"\A";white-space:pre;display:block;} div.navi{height:38px;} div.navi a{ font-size :12px; height:30px; border:outset #33ffff 4px; background-color: #3399ff; color:white; margin:0px 0px 0px 0px;/*間隔１*/ padding:0.25em; display:block; width:13%; float:left; } div.navi a:hover{ border:inset #33ffff 4px; } --> </style> </head> <body> <div class="header"> <h1>タイトル</h1> <DIV class="navi a" align="center"> <A href="purchase.shtml">商品の購入方法</A><A href="torihiki.shtml">特定商取引事項</A><A href="question.shtml">ご質問</A><A href="company.shtml">会社概要</A><A href="sightmap.shtml">サイトマップ</A><A href="andlink.shtml">その他リンク集</A> </div> </div> <div class="section"> <h2>見出し</h2> <p>・・・</p> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> </html>
その他の回答 (1)
- ariseru
- ベストアンサー率56% (928/1657)
>何が原因なのか 最大の原因は、"ブラウザが違う"こと。 IEやFireFoxなどのブラウザは、Web表示の基本的な部分では互換性があります。 ですが、その互換性は完全なものではないため、同じページを開いてもデザインに若干の違いが生じる場合もあるんです。 全てのブラウザで全く同じように表示したい場合は、JavaScriptなどを使ってブラウザの種類毎にデザインに若干の修正を入れるようにするしかないかと。
お礼
有り難うございました。 cssを振り分けるとうまくいきます。
補足
有り難うございました。 早速JavaScriptで試してみます。
お礼
有り難うございました。 htmlのバージョンアップもかねて <!DOCTYPE HTML PUBLIC 宣言を勉強致します。