- ベストアンサー
ブラウザによってナビのデザインが変わる問題について
- ブラウザによってナビのデザインが変わる問題について説明します。
- ナビ部分のデザインがブラウザによって異なる現象が発生しています。
- ナビのCSSとソースコードについて詳細な説明をします。
- gfkdfs
- お礼率26% (37/139)
- その他([技術者向] コンピューター)
- 回答数8
- ありがとう数0
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
＞IEの表示がナビの一番右のボタンが改行されて、左によってしまいました。 ちょっとだけ幅の指定を小さくする(14.5%とか)と良いでしょう。 ＞双方のブラウザに共通な表示をさせることは無理ってことですかねぇ～？ ブラウザごとの解釈の違いを把握して対処します。 [例] ulやolで項目<li>が下がって表示されますが、一方はmarginで他方はpaddingで同じような表示になるようにしています。 この場合、一旦marginやpaddingを再設定しなおします。 このあたりは経験が必要ですね。
その他の回答 (7)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞想定できなければ、試行すらできませんわぁ！ そりゃないです。だから色々試して原因を見つけるのです。私は理科/科学系ですから、予測を立て実験し、推論が正しいか検証する--は絶対に行う事ですから、テキストエディタで欠いて、あれを変え、これを変えして徹底的に調べつくします。 もしそうでなければ、事前にすべてを知ってなきゃなりませんが、それこそ大変ですし、正解にはたどり着けないでしょう。 ＞background-color？背景色・・何のためにですか？ CSSの仕組みでブロック要素は、%指定された場合、直近の【Static以外の】親コンテナブロックのサイズ(padding辺の内側)を参照してサイズを指定できます。 DOM上でルートまでのすべての親要素に色をつければ、%指定された要素がどのサイズを参照しているかが判断できるからです。 またfont-sizeで、空白文字の幅が違う可能性もありますから、font-sizeを指定しなおして見る。 など・・・
- ORUKA1951
- ベストアンサー率45% (5062/11036)
デートがドタキャンになったので・・(**)ちょっと時間が取れた。 ＞この現象からすると、marginやpaddingの問題ではないみたいですね！ あとは、ウィンドウサイズの求め方・・ html,body{margin:0;padding:0;} それと、親ブロックにposition:static以外を設定してみる。 分かりやすいテクニックとして、ナビゲーションを含む親要素にそれぞれbackground-colorを指定して見ましょう。 <DIV class="navi a" align="center" style="background-color:yellow;"> この上の要素があれば、それにも・・
補足
１、 全体の幅は８５０ＰＸですが、両端を５ＰＸずつ余裕を取っています。画像がひっついてブサイクになるからです。 よって、試しに、８４０ＰＸ÷６＝１４０ＰＸ。ボタン幅を１４０ＰＸにしても現象は同じです。 ２、 background-color？背景色・・何のためにですか？ ３、 IE→１つのボタンが改行される。 クローム等→正常に表示。 「IEが改行されないように幅を調整すると、」－－－（１） IE→は正常に表示。 クローム等→１つのボタンが改行される。－－－（２） とにかく、（１）でボタンの幅を縮小しているのに、（２）で縮小されずに改行ですから理論の想定すら分からないですよ。。 想定できなければ、試行すらできませんわぁ！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞これが正常に認識されればキャッシュも解除されるでは？ 私も驚きましたが、ここを書き換えて再読み込みをしても変化ないですね。 ファイル名が異なるものを個別に読むと変化します。IEはウェブ開発者泣かせの厄介です。 ＞どこのソースでstandard.htmlとQuirks.htmlを <DOCTYPE>宣言です。これはすべてのブラウザの仕様です。 HTML4.01の仕様では ⇒7.2 HTMLバージョン情報( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#version-info ) に書かれているように <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> の何れかを書かなければなりません。!!!! 最後のURLが書かれていないものは、仕様を外れるため(過去の仕様への)互換モードで動作する。 ★言い換えれば、著者はこれをブラウザをどちらで動作させるかを利用できるという事です。 ★HTML5は、DTDを使いませんので <!doctype html> だけでよいです。この文書宣言はすべてのブラウザが標準モードで起動します。 <html lang="ja">日本語であることを示します。 これで、テキストは右から左に表示され、テキストは単語境界のない言語として処理されます。 ⇒8.1 文書の言語指定: lang属性( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/dirlang.html#language-info ) <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> これより前に、日本語の文字を書いてはなりません。 他の<head></head>内の要素については特に順番はありません。 <meta name="author" content="ORUKA1951">＊＊＊＊（２） これは関係ないです。 No.4で示したサンプルは、W3Cなどの各種規格や推奨に合わせたものです。 あまり細かい部分は気にしないでください。 Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) Another HTML-lint gateway( http://cetus.sakura.ne.jp/htmllint/htmllint.html ) 用です。 端的にいうと、私はテキストエディタで作成しますから最初に書き始めるときのテンプレートがそうなっていると言う事です。 新規作成→HTML4.01strict(教えてgoo用)と選択すれば、このテンプレートで開くと言う事です。 私は、サイトを作り始めるとき、HTML4.01strict,XHTML1.0strict,XHTML1.1,HTML5,XMLのどれを使うかを決めて、それでまずテンプレートを利用して、そのサイトのテンプレートを作成します。一切デザインは考えず、文書構造だけをマークアップします。 その後スタイルシートで数種類のデザインを検討し、その後はそれをテンプレートとしてツールを使ったりテキストエディタで作成していく手法をとります。 結果的にそれが一番早いし、デザインが自由に変更できるからです。この世にIEがなければ、さぞ楽でしょう。(^^)
補足
ビルダーでシステム拡張子認識しました。http://www.w3.org/TR/html4/loose.dtd"> けど今度は、IEの表示がナビの一番右のボタンが改行されて、左によってしまいました。 双方のブラウザに共通な表示をさせることは無理ってことですかねぇ～？ 画像を添付できないのが断念です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞これだけ書き換えれば、いいのかなぁっと思って書き直しましたが何も変りません。 これは多分キャッシュが生きているのでしょう。 ファイル名を変えて試してください。 No.1に示した二種類のHTMLを少し直したものを下記にあげておきます。 ビルダーを使わずメモ帳にコピーペーストして、 <!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>宣言のたった一行だけでこんなにも変わってしまうのです。 ＞書き換えるとなれば、５０ページの多くを書き換える必要があります・・ ★ビルダーの場合、 ⇒webのナビメニューで、どうしても解決しません！ - その他([技術者向] コンピューター) - 教えて！goo( http://okwave.jp/qa/q8090146.html ) のNo8の回答で示した方法で<DOCTYPE>は変更できます。 かって、あなたがせっかく書き換えても書き換えられるといわれた現象を逆手に取る。 ＞ｃｓｓやhtmlの悪いところをチェックしてくれるサイト何でしょうかね？ CSSやHTMLは調べてくれますが、ブラウザの稚拙はしてくれません。 IEの擁護をすれば、かって他のブラウザを排斥するために用いたIEでなければ見れない手法を用いたサイトが見れるようにするモードが互換モードなのです。 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>
補足
－－キャッシュがきている？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> これが正常に認識されればキャッシュも解除されるでは？ －－メモ帳に書いて、どこのソースでstandard.htmlとQuirks.htmlを認識させているのかが分かりません。 <!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">＊＊＊＊（３） －－（１）は何を意味しているのですか？ －－（２）（３）は<title>より上に記述しなくていいのですか？ －－（２）は何を意味いｓているのですか？ －－基本的に<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> だけ書き換えれば良いって訳じゃないのですね。ｃｓｓとhtmlのソースも書き換えなければならないってことですね。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
・これが原因なら添付しているような写真画像も誤差が生じるのでは。 widthで幅を指定していますね。 widthの幅は、標準モードではpadding辺の内側ですが、IEの互換モードではborder辺の内側になります。 そのため、IEの互換モードのほうが小さくなる。 ⇒ie互換モード width padding - Google 検索( https://www.google.co.jp/#safe=off&hl=ja&sclient=psy-ab&q=IE%E4%BA%92%E6%8F%9B%E3%83%A2%E3%83%BC%E3%83%89+width+padding&oq=IE%E4%BA%92%E6%8F%9B%E3%83%A2%E3%83%BC%E3%83%89+width+padding ) ・他のＣＳＳは何ら問題なく認識されているのが不思議。 一番の要因はpaddingです。paddingが0なら、この差は出ません。 ためしに、padding:0;としてみてください。 ・ネット検索してもブラウザによる、今回のような互換問題は見つけられませんでしたが。 半ば常識です。上記検索をご覧ください。 騙されたと思って、 ・<DOCTYPE>の異なるものを試す ・誤差が出る場合は、paddinを0とする。 別に監視しているわけじゃありません(^^)、複数の仕事を持っていて飛び回っていますが、私が回答できる分野については、連絡が届くだけです。 専門は、コンピューター、科学、DIY、アウトドアと言うところでしょうか？ <DOCTYPEを書き直すだけで、あなたのこれまでの苦労を忘れるくらい解決すると思います。本当に!!
補足
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> これだけ書き換えれば、いいのかなぁっと思って書き直しましたが何も変りません。 上記の宣言をしていれば、ｃｓｓやhtmlが間違っていてもそれなりに解釈してくれるのではないでしょうか？ 書き換えるとなれば、５０ページの多くを書き換える必要があります・・ それも気の遠くなる話です。困りましたなぁ～ 尚、、paddinを0にしても横幅が変るわけではありません。立体が平面になるだけです。
- kmee
- ベストアンサー率55% (1857/3366)
これとか http://www10.plala.or.jp/palm84/css_memo_standard_quirks.html これとか http://www.allinthemind.biz/markup/css/width.html 「IE CSS 互換」で検索 →「widthに差がある」とあったので「IE CSS 互換 width」で検索しました。 IE8では、互換モードになっているので、padding,borderまで含めて15%になっている。 他のブラウザでは、中身が15%で、その外にpadding: 0.25emとborder: 4pxがあるので、実際の幅は 15%+(0.25em+4px)*2 になり、IEより幅が広くなっている。 と、添付画像の結果と一致します。 下の写真の部分は、paddingやborderが0px(あるいは非常に小さい値)で、15% = 15%+(0px) と同じになっている、のではないでしょうか。 IEの互換モードと標準モードとで違いが出る。 互換モードは他ブラウザとの違いが大きい。 これらは、Webデザインをする人には、半ば常識となっています。
補足
各モードの違いが分かりました。 ｃｓｓやhtmlの悪いところをチェックしてくれるサイト何でしょうかね？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ORUKA1951です。 困りましたね。なんとか手助けしたいのですが・・・ 原因は、明々白々（IEの互換モードによるもの）で、対処もひとつしかないのです。 javascriptを使うとか、CSSハックを使う手もありますが、ややこしくするだけで根本的な解決ではありません。 下記にサンプルをあげておきます。 このままメモ帳にコピーして、二種類別名で保存してIEで確認してください。 私も通ってきた道です。頑張ってください。 解決策--ビルダーの設定変更方法はすでに示しました。 DOCTYPEは、 <!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です。 [Standard.html] <!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.navi a{ font-size :12px; border:outset #33ffff 4px; background-color: #3399ff; color:white; margin:0px 0px 0px 0px;/*間隔１*/ padding:0.25em; display:block; width:15%; 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> [Quirks.html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <style type="text/css"> <!-- div.navi a{ font-size :12px; border:outset #33ffff 4px; background-color: #3399ff; color:white; margin:0px 0px 0px 0px;/*間隔１*/ padding:0.25em; display:block; width:15%; 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>
補足
やはり・・ 何か、私だけを集中的に見張っているような・・刑事のような・・迷惑ではありませんが、他の方の意見も聞けなければ相談箱に出している意味が無いし発展がないです。 同じ講義を受けても、私の見解も変ることがないですから・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> これが原因なら写真画像を含む、他の箇所にも互換原因がでるのでは？ 《私の一番の疑問》 ・これが原因なら添付しているような写真画像も誤差が生じるのでは。 ・他のＣＳＳは何ら問題なく認識されているのが不思議。 ・ネット検索してもブラウザによる、今回のような互換問題は見つけられませんでしたが。 何れにしましても、私の理解できないソースを記述することはできませんがね。 私がこれが原因では無いと思っているのは上記の理由からです。 《質問》 ・今回の何が、互換問題になっているんですか？
補足
おかしな現象が出てきました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> を認識させると、 IE→１つのボタンが改行される。 クローム等→正常に表示。 「IEが改行されないように幅を調整すると、」 IE→は正常に表示。 クローム等→１つのボタンが改行される。 とにかく、”あっちを立てれば、こちらが立たず”って感じです。 益々、訳が分かりません。 この現象からすると、marginやpaddingの問題ではないみたいですね！