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/SHOP-URL/skinix/css/atlesscare_p3.css上記CSSファイルですが、最初に、ファイルの前後に、CSSファイルとして相応しくないHTMLの記述がありますので、ファイル先頭のを削除していただきますようお願いします。次に、先頭に文字コードの指定がないため、楽天の商品ページでこのCSSファイルを読み込むと文字化けを起こして日本語のフォントが正常に読み込めなくなりますので、ファイルの先頭に@charset "Shift_JIS";を加えていただきますようお願いいたします。

Answer

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

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

カテゴリーから探す