Bootstrapを使ってサイト制作したときに、IEでスクロールバーがコンテンツに重なってしまう

Bootstrapを使って画面右端にボタン固定のページを作っていたのですが、IEでボタンの上にスクロールバーが重なってしまっていたので、対応方法を調べてみました。

サンプルコード

BootstrapのCSSを読み込んで、ボタンを右端に固定します。

HTML

<div id="rightBtn"><a href="">右側固定ボタン</a></div>

CSS

#rightBtn {
	position: fixed;
	top: 100px;
	right: 0;
	width: 2em;
}

position: fixed;で右端に固定しているのですが、IEだと上にスクロールバーが重なってしまいます。
IEでスクロールバーが重なるデモページ

対応方法

原因はBootStrap内の「@-ms-viewport {width: device-width}」でviewportを指定していることが原因のようでした。

CSS

@-ms-viewport {
	width: auto;
}

viewportを上書きすることで対応できました。
IEでスクロールバーが重ならにようにしたデモページ
　

【参考サイト】

• IE でスクロールバーがコンテンツに重なる問題を解決する – カラクリ.jp