サイト制作に関するメモ書き

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

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でスクロールバーが重ならにようにしたデモページ
 

【参考サイト】

 

コメントを残す

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

▲PAGE TOP