※ ChatGPTを利用し、要約された質問です(原文:CSSで設定した背景画像がFirefoxだとズレて表示されます)
CSSで設定した背景画像がFirefoxだとズレて表示されます
CSSで設定した背景画像がFirefoxだとズレて表示されます
以下のように、CSSを設定しました。
-- CSSの内容(抜粋) -------------------------------
H2{
color:#333333;
background-image:url(img/title-01.jpg);
background-repeat:repeat-x;
padding:3px 25px;
font-family:"Lucida Sans";
font-size:medium;
}
-- 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">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タイトル</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="info-area">
<h2>いろはにほへと</h2> ←問題なくタイトル文字の後ろに背景画像title-01.jpgが表示されている
<div></div>
<div></div>
</div>
<div id="main-area">
<h2>ちりぬるをわか</h2> ←大幅に上方にズレて表示される
<div></div>
<div></div>
</div>
…以下省略…
CSSは外部読込にしてあり、HTML内には幅や高さ,色などを指定するタグは一切ありません。
問題の部分に到達するまでのタグは
なお、上記の指定方法でInternetExplorer6.02とSleipnir2.8.5では
問題なく表示されています。
表示が崩れたFirefoxは3.0.11です。
Firefoxでも意図したように表示される方法はありますか?
お礼
お礼が遅くなり申し訳ないです。 ご指摘いただいたとおり、他の設定が影響していたようです。 CSSファイルを見直し不要な部分を削除し、コードを並べ替えたところ ズレが生じなくなりました。 ありがとうございました。