ie11対策まとめ - ゆるくweb制作

ユーザーエージェントで振り分け

bodyにclass付けるやつ昔はよく、ifでつけてたやつだね

var ua = window.navigator.userAgent;
if( ua.match(/MSIE/) || ua.match(/Trident/) ) {
  var bodyElement = document.getElementsByTagName('body');
  bodyElement[0].classList.add( 'ie' );
}

2017/05/08追記

head内にjsを置く場合は,window.onloadにしないとエラーになるので注意

position fixedの要素があるとスクロールががたつく（edgeも）

固定headerや、固定サイドバーがの時に起こる。以下を記載すると「マシ」になる。

 if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) {
     $('body').on("mousewheel", function () {
         event.preventDefault();
         var wd = event.wheelDelta;
         var csp = window.pageYOffset;
         window.scrollTo(0, csp - wd);
     });
 }

参考サイト:http://cloud-collector.link/2016/05/08/ie-fixed-scroll-bug/

画像周り

svgは画像サイズが小数点以下を含むと、ぼやけたりギザる時がある。

倍サイズ以上のサイズの画像を使うとギザる時がある（ちょっと何言ってるかわからない）要は表示サイズが50pxなのに、200pxの画像を使うとギザるかもよって話し（やっぱり何いってるかわからない）

レスポンシブのサイトとかだとたまにあるよね。

こちらのサイトで解説されているのでチェック http://blog.medical-design.co.jp/archives/2311

游ゴシック

font-weight:600;

は認識しない？ boldはもちろんOK

form周り

selectの矢印消す

select::-ms-expand {
    display: none;
}

游明朝

MediumやDemiboldだと、font-feature-settings : "palt";が効かない Lightだと効くので

body {
    font-family: "游明朝 Light";
    font-weight: bold;
    font-feature-settings : "palt" 1;
}

にするとまだマシになる

webフォント

googleフォントが、使えるものと使えないものがある。 ie11でgoogleフォントにアクセスすると、非対応だよ的なことを言われるので使わない方がいいかも。

https://qiita.com/chisamikan/items/c4d37754d175c17fbe41

table周り

thやtdにposition:relativeを設定すると thやtdに設定したborderが消える。

position:relativeを消せばもちろん治る。直せない場合は、wrapperクラスを追加するなり、before疑似クラスなどでborderを付けたりする方法も可能。

th{
    positon:relative;
    background:#ccc
    border:solid 1px #fff;
}

main要素

main要素を認識しないので、display:block

main{
    display: block;
}