IE向けに作っているWebページをEdgeで閲覧しても問題ないかを確認していたところ、レイアウトが崩れてしまうページがいくつかあった。
原因はIEとEdgeでは標準で使用されるフォントが異なるためだった。
見た目を完全に同じにすることはできないが、フォントを指定することによりIEの表示に近づけることができた。
現象
IE向けに作っているWebページをそのままEdgeで開いたとき、以下のような現象が発生した。
- IEとEdgeで表示される文字フォントが異なる。
- ブラウザの大きさを変えた時、画面内のテキストボックスなどの伸縮の挙動が異なる。(Edgeだと、ブラウザの横幅を少し縮めただけで文字が折り返されてしまう)
- Edgeだと<em>タグ(協調表示で斜体となる)が効かない。
対応
IEのデフォルト文字フォント：MS PGothic
Edgeのデフォルト文字フォント：メイリオ
となっている。スタイルシートを使って文字フォントを明示的に指定する。
こんな感じ
<html>
<style>
body{font-family:”MS PGothic”;}
input{font-family:”MS PGothic”;}
</style>
<body>
～～
</body>
</html>
これで見た目がIEに近くなる。ブラウザの横幅を縮めた時の文字の折り返し位置はそれでもIEより早く折り返されるがだいぶマシになった。
あと、メイリオフォントには斜体がないらしい。フォントを変えることによって斜体も無事に表示された。