- ベストアンサー
IEとFirefoxの見え方の違いを揃えたい
- IEとFirefoxの見え方の違いを揃えるための解決法を教えてください。
- IEで問題なく表示されるが、Firefoxでは乱れて隙間が発生する現象について説明します。
- 背景色をつけた<h1>タグの下にアンダーラインを表示したいが、Firefoxではpositionの指定が無視されてしまいます。
- ibegyourpardon
- お礼率81% (27/33)
- HTML
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
No.3です。 ＞しかし、文法的に正確な言葉と、意味は相手に伝わるけど崩れている言葉との関係、 ＞時代とともにどんどん軸が移ろう基準など、一般言語と何も変わりませんねぇ。 ちょっと誤解があるような？？HTMLは最初に読むのはお馬鹿なコンピューターなのです。この場合画像とh1要素の間にスペースがとられるのは、 「行内要素がbody直下にはない」 よってこれは <h1>タイトル</h1> <p> <span ><img></span> </p> であるはずだとブラウザが解釈して描画を試みるからです。ブラウザに期待されているまっとうな処理です。(IEなどはdivと解釈するのかも？) HTMLが正しく書かれていないと、このようにブラウザに大きな負担をかけることになり、合わせて文書構造がコンピューターに理解できないため検索エンジンも内容を理解できなくなります。またブラウザによる解釈の差で表示が全く異なったりもします。 HTMLは、3.2までの反省から原点に戻ってHTMLは文書構造のみを記述して、スタイルシートでプレゼンテーションを担うように大きく舵を切りなおしました。この流れは今後も変わらないでしょう。 言い換えると、文法はお馬鹿なコンピューターと著者の負担を軽くするためだということです。 ★このh1--見出し(レベル１)の下に単色のバーを引きたいだけでしたら、h1のborderで指定するほうが良いでしょう。 h1{padding-bottom:2px;border:none;border-bottom:green 20px solid;} とか・・
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.3です。 h1の背景画像は高さが24px程度なら幅は１px以上の小さなものでよいです。x方向にくりかえされる。
お礼
はい、べた背景に画像を使うならピクセルのごく小さい画像をリピートさせています。 逆に場合によっては大きな背景に常識外の大きさの画像でリピートさせたりしています、ちょっと時間は掛かりますけど。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<h1 style="width:80%; color:#000000; background-color:#b3d7e3; font-size:56px; line-height:80px; letter-spacing:-5px;"> タイトル</h1><span style="position:relative; top:-20px;"><img width="80%" height="22" alt="underline" src="line.gif"> このHTMLは少しおかしい。<body>直下に<span>や<img>のインライン要素はおけないです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-BODY )］より body要素内には、スクリプト,del,insを除きブロック要素しか置けない!! また、デザインのためだけに画像を置かない!!たとえ置いたとしてもaltは"--------------"とでもするでしょうね。(画像を読み込まないときに何を表示するかですから。 よってHTMLは <h1>タイトル</h1> だけでよいです。 <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- h1{ width:80%;margin-right:20%; color:black; background:url(line.gif) repeat-x bottom #b3d7e3;text-indent:0.5em; font-size:56px;letter-spacing:-5px; height:80px;} --> </style> </head> <body> <h1>タイトル</h1> <p>ここから本文</p> となる。HTMLはスタイルシートがなくても、テキストブラウザや検索エンジンで意味が分かるように率直に書き、ビジュアルなブラウザで、それなりに表示させるように書くことが基本です。私は、Lynxで必ず確認しています。 http://lynx-win32-pata.sourceforge.jp/index-ja.html
お礼
丁寧な回答有難うございます。 >このHTMLは少しおかしい。 お恥ずかしい、でもこれは題意部分の要約で、実際には外部CSSを多用し、 HTML文書は少ない記述で済むようには心がけています。 示唆の多い回答ですね。hタグだけでアンダラインも表示、すっきりしています。 spanの使い方ほかご質問以外に関しても参考にさせて頂きます。 しかし、文法的に正確な言葉と、意味は相手に伝わるけど崩れている言葉との関係、 時代とともにどんどん軸が移ろう基準など、一般言語と何も変わりませんねぇ。 有難うございました。
- John_Papa
- ベストアンサー率61% (1186/1936)
ブラウザ毎に異なるタグに与えられた標準のマージンをクリアしたら如何でしょうか？ なお、spanはインラインタグなので、レイアウトにはブロックタグのpなどを使います。 ブロックを隙間無くくっつけるには、少なくとも向き合う側のmarginを0に指定しておきます。 <h1 style="width:80%; color:#000000; background-color:#b3d7e3; font-size:56px; line-height:80px; letter-spacing:-5px; margin:0;"> タイトル</h1><p style="margin:0; padding:0;"><img width="80%" height="22" alt="underline" src="line.gif"></p>
お礼
ご回答有難うございます。 >spanはインラインタグなので どうもspanを多用する癖があります、表見上破綻がなければ深くは追求しないという安易なアプローチ。 margin:0;、有難うございます。それで出来ました。 アンダラインはgifで作って下に加えると言う私のやり方の方向でもって救って頂きました。でもスマートな記述はno.1さんだと反省したのでそちらを使わせて頂きますが、この考え方は今後役に立つことがあろうかと思います。
- DrFell
- ベストアンサー率55% (305/551)
<h1 style="width:80%; color:#000000; background-color:#b3d7e3; font-size:56px; line-height:80px; letter-spacing:-5px;border-bottom:solid #86b300 22px;"> タイトル</h1> ではどうでしょう？ 何を基準に20ピクセル上げたのかは知りませんが、Firefoxが乱れているわけではないと思いますが…… 長年って、ｃｓｓの基本を学ばれることをお勧めします。
お礼
早速のレス有難うございます。 border-bottomですか、記述は短くてすっきりしていますね。有難うございました。勉強になりました。 早速全該当記述を書き換えます。 製作した当初はIEさえクリアしておればと十分検証せず、後から気付いてもどうしてよいか解らずあがいておりました。 >長年って、ｃｓｓの基本を学ばれることをお勧めします。 耳に痛いです。
お礼
どんぴしゃりの回答はNo.1さんから既に頂いているので悩みましたが、 色々たくさん教えて頂いたのでポイントを差し上げます。
補足
お正月早々にお時間を取らせて申し訳ありません。 直ちに了解出来るほどの知識を持ち合わせていませんが、 私のタグの基本的な間違いは 「<body><ブロックレベル要素><インライン要素></インライン要素></ブロックレベル要素></body>はOKだけども<body><インライン要素></インライン要素></body>と書いてはいけない」という約束事を犯したという意味なのでしょうか。 ご紹介のサイトを読んでも術語が具体的に何を意味するかがしっかり解らないままそれがたくさん並んでいる文章を読み進むのは時間が掛かります。いきなり全部勉強は出来なくても問題にぶち当たった都度知識を蓄えて行きます。