IE10、IE11、Windows 8 Edgeでページ全体のスクロールバーがコンテンツと重なる

IE10、IE11、Windows 8 Edgeでページ全体のスクロールバーがコンテンツと重なる現象が発生することがあります。

原因

これはIE、Edgeのviewportの仕様で、viewportのwidthの値がdevice-widthだった場合に、コンテンツの領域がスクロールバーの領域を含んでいるために起こる現象です。

CSS

回避方法

対策としては、このviewportのwidthの値をautoにするか、-ms-overflow-styleプロパティをscrollbarとして指定することで解消できます。
なお、meta要素のviewportを指定している場合は衝突することがあるので、その場合は!importantを指定します。

CSS

CSS