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

Question

IEでは問題ないのですが、Chrome、firefoxだと
テキスト部分がずれてしまいます。

また、自PCにあるhtmlを読み込んだときと、
RMS上に登録したページを表示させたときのフォントが若干異なります。
（寄せる力・・・の部分です。）

htmlは商品ページの商品説明文にコピペし、
cssは楽天goldにおいています。

商品ページはこちらです。
(商品URL)

お忙しいところ申し訳ございませんが、
この2点、ご教示願います。

Accepted Answer

ECマスターズの田中です。


＞IEでは問題ないのですが、Chrome、firefoxだと
＞テキスト部分がずれてしまいます。

位置の調整方法を確認したところ、
タグの中にタグを配置し、
それらにpaddingやmarginを適用して各文字の位置調整をされておりますが、
この場合、タグの高さの扱いなど、
位置ズレの原因となる要素が多くなってしまいます。

たとえば、に「position:relative;」を設定し、
テキスト一つ一つを囲む要素に「position:absolute;」を設定するといったように、
positionプロパティのrelativeとabsoluteを組み合わせる方法ですと、
少なくともテキストの開始位置はピクセル単位で合わせることができますので
ご活用いただければと思います。
下記ページの「absoluteと組み合わせて使う」をご参照ください。
https://zxcvbnmnbvcxz.com/css_sutudy_3/


＞また、自PCにあるhtmlを読み込んだときと、
＞RMS上に登録したページを表示させたときのフォントが若干異なります。
＞（寄せる力・・・の部分です。）

どちらかの場合において、外部CSSファイルのフォントの定義が
うまく読み込めていない可能性があります。

フォントの定義が書いてある
http://www.rakuten.ne.jp/gold/kyowa-ltd/skinix/css/atlesscare_p3.css
上記CSSファイルですが、
最初に、ファイルの前後に、CSSファイルとして相応しくないHTMLの記述がありますので、

ファイル先頭の

Answer

いつもご丁寧にお答えいただきありがとうございました。

2点とも解決しました。
ありがとうございました。