IE6,7で画像の上に載せた文字がずれる

質問

HTMLなのですが、
画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。
さらに上と下の画像にはテキストを上にかぶせて表示します。
画像全体にリンクを貼ってあります。

下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。

・画像とテキストの縦位置のズレ
・画像間に2px程度の空白が生じる
・画像に設定したリンクが開かない

大変困っています。
どなたか原因と修正方法を教えていただけますでしょうか。

<a href="test.html">
<div style="position: relative; width: 183px; height: 265px; ">
<img src="images/top.jpg" width="183" height="36" />
<div style="position: absolute; top: -11px; left: 55px;" class="font16b">
<p align="center">text1</p>
</div>

<img src="images/main.jpg" width="183" height="193" border="0" />

<img src="images/bottom.jpg" width="183" height="36" />
<div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13">
<p align="left">text2</p>
</div>
</div>
</a>

回答No.3

bvltiggeari · ベストアンサー

No.2です。

>・画像とテキストの縦位置のズレ
TOPの指定方法が分かってらっしゃるのであれば、
私がよくやる方法はCSSハックです。

今回ですとIE6とIE7が問題とのことですので、
以下のような感じのCSSでいかがでしょうか？

.font16b { top: hogehoge; /* 他のブラウザ用 */
*top: hoge; /* IE7以下用 */ }
頭に「*」を付けるだけです。
（※ font16bがCSSクラスの想定）

他にもcssuaというJavaScriptを使用したり、
CSSを動的に変える方法は色々ありますが、
今回だとこの方法が簡単かなって思います。
CSSハックの記述方法がちょっと曖昧なので
間違ってたらごめんなさい(汗)

参考URL：

http://coliss.com/articles/build-websites/operation/css/css-quick-tip-css-hack-target-ie6-ie7-ie8.html

お礼

おお、ありがとうございました！こんなやりかたがあったとは。
解決できました。
本当にありがとうございました。

回答No.2

bvltiggeari

こんにちは！
IEのブラウザ、やっかいですよね…。

>・画像とテキストの縦位置のズレ
>・画像間に2px程度の空白が生じる
例えば、全て1行で書くと解消する場合もあります。
<img src="images/main.jpg" width="183" height="193" border="0" /><!--

--><img src="images/bottom.jpg" width="183" height="36" />
と入れてコード上では1行の状態にするだけでも効果が
あるかもしれません。
私はこれで何度か解消したことがあります。
（ブラウザによって改行は無視なのか空白スペースなのかが変わるようですね…）

余談ですが、IEのデザインを見るのに「Firebug Lite」を
使ってみてはいかがでしょうか？
IE6以上対応ですし、本家Firebugほどではありませんが
そこそこ内容を確認できます。
（既知のことでしたらごめんなさいm(_ _)m）

>・画像に設定したリンクが開かない
こちらはNo.1の方の回答の通りです。
ガンバって１つずつ入れていきましょう！

お礼

ありがとうございます。
試しにやってみたらなおりました。驚きました。
IEではコード上の改行が反映されているんですね。

ただ、縦位置のテキストのズレについては、解決されませんでした。
何か方法はありませんでしょうか…。

回答No.1

神崎 渉瑠（@taloo）

>・画像とテキストの縦位置のズレ
topを変えれば良いのでは？

>・画像間に2px程度の空白が生じる
margin: 0 や base-line: bottomで空白が消えると思います。

>・画像に設定したリンクが開かない
HTML4、XHTMLでは<a>の中はインライン要素のみです。
HTML5では自由に配置できるようになりましたが、HTML5に対応していないブラウザ（HTML4に従うもの）はインライン要素の中にブロック要素があると、その手前でインライン要素の終了タグが省略されていると見なすものがあります。
（見なさない物もあります。また、タグごとに異なる動作をする物もあります。HTML4/XHTMLではこのエラー処理は未定義のため、どちらも文法的に正しい動作です。）

古いブラウザにも対応させるには、このような配置で、こまかく<a>を指定してください。

<div><a><img /></a>
<div><p><a>text1</a></p></div>
<a><img />
<img /></a>
<div>
<p><a>text2</a></p>
</div>
</div>

お礼

ありがとうございます！
2つ目と3つ目については何とかなりそうです。
縦位置のテキストのズレについては、TOPの指定をIE6,7に合わせて変更すると他のブラウザでその分ズレが生じてしまいます。
何か方法はありませんでしょうか…。