IEで文字の高さがずれる

IEで文字の高さがずれる事象をどうにかしたい。

校正で指摘されることが多く、コーディング担当者が事前に確認／解決できる改善したいです。

原因

どうやらフォントが関係しているみたいです。
https://stand-4u.com/web/ie11_yu.html

解決方法①：X-UA-Compatibleを指定する

参考
https://www.creativevillage.ne.jp/2819
https://note.mu/alling/n/na46adff67abe

サンプル

headに追加下記の記述を追加
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

解決方法②：メディアクエリでIEのみ指定してpaddingで高さ調整

参考
https://www.ipentec.com/document/media-query-only-internet-explorer-10-11

サンプル

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  h1{
    font-size:32px;
    font-family:'MS Gothic';
  }
}

↑の内容をmixinで登録しておけば楽そうですね。
↓こんな感じで。

@mixin ie-yugo {
  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    @content;
  }
}

文字の高さがずれることによって、マーカーの位置がずれる現象の調整

IEのみマーカーの位置がずれてしまうので、

解決方法：backgroung-positionを指定する

参考
http://hc_gold.cynosura.jp/gold/henri-charpentier/contents/kisei-gift/

サンプル

 
■マーカーを引くCSS
#main_content .hLight-y {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), 
  color-stop(60%, #ffff66));
  background: linear-gradient(transparent 60%, #ffff66 60%);
}
■IEのみマーカーの位置を調整するCSS
@media screen and (-ms-high-contrast: active) and (min-width: 768px), screen and (-ms-high-contrast: none) and (min-width: 768px) {
  #main_content .hLight-y {
    background-position: 0 -4px;
  }
}