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でスクロールバーが重なるデモページ

scrollbar-overlaps-the-content-when-viewed-in-initenet-exproler-when-you-use-the-bootstrap01

 

対応方法

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

CSS

@-ms-viewport {
	width: auto;
}

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

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31