クロームとIEでの表示され方の違い

Question

お世話になります。
RMSデザインのヘッダーにインラインフレームで看板や各バナーを表示させていますが、
クロームでは正しく表示されて、IEでは上下に約5cm程度のすきまがあります。

これをクロームと同様に表示させる方法はありますでしょうか。

宜しくお願いします。

Answer

ECマスターズの田中です。

IEで発生するすきまの件、
確認の上、改めてご返信いたします。

Answer

ECマスターズの田中です。

私にて表示を確認したところ、
主にフォントの違いによって、文字の占める高さが異なり、
ページ全体の高さに影響を与えていることがわかりました。

ブラウザごとの表示の違いは、
開発元が異なる以上、どうしても発生してしまいますので、
表示の違いを最大限抑えるために、
リセットCSSの導入、および使用するフォントの指定をお願いいたします。

リセットCSSについては、既に
https://yui.yahooapis.com/2.5.0/build/reset/reset-min.css
を導入されておりましたが、
米Yahooによるサービス停止に伴い、
上記アドレスは無効（ファイルが無い状態）となっておりました。

外部リンクを利用していることにもつながりかねませんので、たとえば

sanitize.css
https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/5.0.0/sanitize.min.css

のようなリセットCSSをダウンロードし、楽天GOLDにアップロードしてご利用ください。

使用するフォントにつきましては、

font-familyに指定する2017年春の決定版メモ
https://qiita.com/noir010/items/3d5f129ed4a4527dd896

をご参考いただき、
body, td, th への規則に、

font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;

のプロパティを追加していただければと思います。

まずは、上記２つの対策を、テスト用に複製したページに実装していただき、
問題なく表示されるか、ご確認いただきますようお願いいたします。

Answer

ありがとうございます。
ヘッダーに入れてる以下CSSの何処に「font-family～」を足せばいいでしょうか？

宜しくお願いします。


body,td,th {
	font-size: 12px;
	color: #692507;
}
a:link {
	color: #666666;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #666666;
}
a:hover {
	text-decoration: underline;
	color: #666666;
}
a:active {
	text-decoration: none;
	color: #666666;
}

Answer

ECマスターズの田中です。

＞ヘッダーに入れてる以下CSSの何処に「font-family～」を足せばいいでしょうか？

body,td,th {
と
font-size: 12px;
の間に、足していただきますようお願いします。

Answer

ありがとうございます！
上手くできました。

いつも助かります！