htmlの描画がずれてしまう-その2

Question

お世話になっております。

前回、FireFoxでhtmlの描画がずれている質問をさせていただいたのですが、
今回もまた、FireFoxで描画ずれが起こっています。

毎度すみませんが、どのようにすれば描画ずれを直すことができるか、
お教え願えますでしょうか。

該当ページは以下です。
http://item.rakuten.co.jp/kyowa-ltd/c/0000000122/

IEではきれいに表示されているのですが、FireFoxになると
境界線に画像が上から乗ってしまっているためか、境界線が切れています。

お手数おかけしますが、ご回答よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

私の方でも、再確認したところ改善されなかったのですが、
category.cssのURLを直接読み込み、
line-height:0; が追加されたことを確認してから
カテゴリページを読み込み直したところ、
改善されておりました。

最新のcategory.cssが読み込まれていない可能性がありますので、
カテゴリページ自体、もしくはcategory.cssを
再読み込みしていただけますでしょうか。

Answer

ECマスターズの田中です。

Firefoxの場合、何らかの理由で、
画像の前に空白行が1行入っているのが原因でした。

HTMLを操作しても行は消えず、行ができた原因は不明ですが、
楽天GOLD「category」フォルダ内「category.css」ファイルにて
26行目より開始している

#main dd.img

に対するルールの中に、

line-height: 0;

を加えていただくと、空白行の高さを失くすことができますので、
Firefoxでも境界線が切れずに表示されるようになります。

Answer

早速ご回答いただき、ありがとうございます。

>line-height: 0;
を追加いたしました。
ですが、改善されませんでした。

引き続き、ご確認お願いできますでしょうか？

お手数おかけしますが、よろしくお願いいたします。

Answer

履歴をクリアしたところ、描画ズレがなくなりました。

ありがとうございました。