htmlの描画がずれてしまう

Question

楽天goldでhtmlを作ってiframeで埋め込みをしています。IE、Chromeではきれいに表示されているのですが、Firefoxだとずれてしまっています。htmlの記述のどこかが悪いのだと思いますが、どこが悪いのかがわかりません。すみませんが、お教え願えますでしょうか？該当サイトはここです。(解決後、urlをけしました。)よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。失礼いたしました、確かにpaddingを調整すると、背景画像も影響を受けてしまいます。文字だけを移動するために、まず

タグの中身を

〜

で囲んでいただき、例えばfeature01 dd.txt div { margn-top: 25px; }のように、囲むために使った

タグに、上方向の空白を加え、文字の位置を調整していただけますでしょうか。

Answer

ECマスターズの田中です。説明文を記載しているtxtクラスの

タグが、本来ブロックレベル要素ではないため、Firefoxの場合は高さの指定が無視されてしまった結果、レイアウト崩れの原因になっておりました。楽天GOLD「category」フォルダ内「category.css」の指定の中に、dd.txt { display: block; }を加えていただくか、td.feature0* dd.txt { （*の部分は1〜4の数字）の各規則の中に、「display: block;」を加えていただくことで、背景の表示崩れは解消することができます。ですが、上記指定だけですと、OS（Windows、Mac）やブラウザ（IE、Chrome、Firefox）の違いにより文字の位置にズレが発生します。一行あたりの高さや、フォントの大きさが「em」「%」のように、環境によって変わりやすい単位で指定されていることが原因です。該当箇所は、必ず固定のサイズで表示される場所になりますので、td.feature0* dd.txt { （*の部分は1〜4の数字）の各規則の中で、line-height や font-size の値の単位をpxにご変更いただき、見た目の調整を行っていただけますでしょうか。また、文章の開始位置の調整も、現在
タグで行われておりますところを、paddingの値を調整することで行っていただけますでしょうか。CSSの調整方法がわからない場合は、再度ご返信ください。

Answer

ご回答ありがとうございます。>td.feature0* dd.txt { （*の部分は1〜4の数字）>の各規則の中に、「display: block;」を加えていただくことで、>背景の表示崩れは解消することができます。⇒いれました。>各規則の中で、line-height や font-size の値の単位を>pxにご変更いただき、見た目の調整を行っていただけますでしょうか。⇒pxに変更しました。>また、文章の開始位置の調整も、現在
タグで行われておりますところを、>paddingの値を調整することで行っていただけますでしょうか。⇒この方法がうまくいきません。　
で文字開始位置を下げていますが、td.feature0* dd.txt のpaddingをマイナスにしたりしてお　文字が下がりません。　背景も一緒に下がってしまってしまいます。　すみませんが、どのようにして
で文字を下げているところを　paddingでどう設定すればよいでしょうか。どうぞ、よろしくお願いいたします。

Answer

ご回答ありがとうございます。divで囲むことで、描画ズレが解消しました。ありがとうございました。

htmlの描画がずれてしまう

カテゴリーから探す