IEとFirefoxの見え方の違いを揃えたい

解決済

質問者：ibegyourpardon
質問日時：2011/01/03 14:57
回答数：5件

明けましておめでとうございます。

長年の疑問をご質問します。
<h1>のフォントに背景色をつけ、更にその下にアンダーラインをつけております。
IEで作成したのでIE8では問題はないのですが、Firefoxでは乱れて隙間が出来てしまいます。

この解決法をお教え頂けないでしょうか。

添付画像は編集しましたが、上がFirefox、下がIE8です。
記述は<body>～</body>の該当部分を編集して下に記します。
緑色のラインをpositionで20ピクセル上げた記述をFirefoxでは無視しているようです。

<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">

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： ORUKA1951
回答日時：2011/01/04 11:43

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;}
とか・・

この回答への補足

お正月早々にお時間を取らせて申し訳ありません。

直ちに了解出来るほどの知識を持ち合わせていませんが、

私のタグの基本的な間違いは
「<body><ブロックレベル要素><インライン要素></インライン要素></ブロックレベル要素></body>はOKだけども<body><インライン要素></インライン要素></body>と書いてはいけない」という約束事を犯したという意味なのでしょうか。

ご紹介のサイトを読んでも術語が具体的に何を意味するかがしっかり解らないままそれがたくさん並んでいる文章を読み進むのは時間が掛かります。いきなり全部勉強は出来なくても問題にぶち当たった都度知識を蓄えて行きます。

補足日時：2011/01/04 14:18

通報する

- 0
- 件

通報する

この回答へのお礼

どんぴしゃりの回答はNo.1さんから既に頂いているので悩みましたが、
色々たくさん教えて頂いたのでポイントを差し上げます。

通報する

お礼日時：2011/01/07 09:00

No.4

回答者： ORUKA1951
回答日時：2011/01/04 01:23

No.3です。

h1の背景画像は高さが24px程度なら幅は１px以上の小さなものでよいです。x方向にくりかえされる。

- 0
- 件

通報する

この回答へのお礼

はい、べた背景に画像を使うならピクセルのごく小さい画像をリピートさせています。
逆に場合によっては大きな背景に常識外の大きさの画像でリピートさせたりしています、ちょっと時間は掛かりますけど。

通報する

お礼日時：2011/01/04 11:07

No.3

回答者： ORUKA1951
回答日時：2011/01/04 01:06

<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-html4 … )］より

　body要素内には、スクリプト,del,insを除きブロック要素しか置けない!!

　また、デザインのためだけに画像を置かない!!たとえ置いたとしてもaltは"--------------"とでもするでしょうね。(画像を読み込まないときに何を表示するかですから。

よってHTMLは
<h1>タイトル</h1>
だけでよいです。

<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">

</style>
</head>
<body>
<h1>タイトル</h1>
<p>ここから本文</p>

となる。HTMLはスタイルシートがなくても、テキストブラウザや検索エンジンで意味が分かるように率直に書き、ビジュアルなブラウザで、それなりに表示させるように書くことが基本です。私は、Lynxで必ず確認しています。
http://lynx-win32-pata.sourceforge.jp/index-ja.h …

- 0
- 件

通報する

この回答へのお礼

丁寧な回答有難うございます。
>このHTMLは少しおかしい。
お恥ずかしい、でもこれは題意部分の要約で、実際には外部CSSを多用し、
HTML文書は少ない記述で済むようには心がけています。

示唆の多い回答ですね。hタグだけでアンダラインも表示、すっきりしています。

spanの使い方ほかご質問以外に関しても参考にさせて頂きます。

しかし、文法的に正確な言葉と、意味は相手に伝わるけど崩れている言葉との関係、
時代とともにどんどん軸が移ろう基準など、一般言語と何も変わりませんねぇ。

有難うございました。

通報する

お礼日時：2011/01/04 10:58

No.2

回答者： John_Papa
回答日時：2011/01/03 16:27

ブラウザ毎に異なるタグに与えられた標準のマージンをクリアしたら如何でしょうか？

なお、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>

- 0
- 件

通報する

この回答へのお礼

ご回答有難うございます。
>spanはインラインタグなので
どうもspanを多用する癖があります、表見上破綻がなければ深くは追求しないという安易なアプローチ。

margin:0;、有難うございます。それで出来ました。

アンダラインはgifで作って下に加えると言う私のやり方の方向でもって救って頂きました。でもスマートな記述はno.1さんだと反省したのでそちらを使わせて頂きますが、この考え方は今後役に立つことがあろうかと思います。

通報する

お礼日時：2011/01/03 18:14

No.1

回答者： DrFell
回答日時：2011/01/03 16:10

<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が乱れているわけではないと思いますが……
長年って、ｃｓｓの基本を学ばれることをお勧めします。

- 0
- 件

通報する

この回答へのお礼

早速のレス有難うございます。
border-bottomですか、記述は短くてすっきりしていますね。有難うございました。勉強になりました。
早速全該当記述を書き換えます。
製作した当初はIEさえクリアしておればと十分検証せず、後から気付いてもどうしてよいか解らずあがいておりました。
>長年って、ｃｓｓの基本を学ばれることをお勧めします。
耳に痛いです。

通報する

お礼日時：2011/01/03 18:06

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！