IEで縦のスクロールバーが2本になった。

謎の挙動が多いことで有名なIEさんですが、謎の現象になったので、解消法のメモとして

スクロールバーが2本って!!

それなりに長くWeb制作の現場にいるけど、今回のは初めて遭遇した。そもそもスクロールバーが2本って、どういうことやねん!と思うかもしれませんが、下の図を見てもらえば分かると思います。

Window全体(表示領域)がoverflow: scroll;になったかのような表示になりました。IE8さんとIE7さんだけなら、「あ〜またか。また君らか。早く逝ってください。」と、中指を華麗に直立姿勢するだけで、何もしない場合もありますが(おい!)、IE9さんでもIE10さん(デスクトップ版のほうのみ、Modern UIのほうのIE10さんは問題なし)でもなってました。さすがにこれは見過ごせん、ということで意外と重い腰をあげて調べました。

今回のことの発端

一定の箇所までスクロールすると要素がヘッダーに固定されるというよくあるものですが、それを実装したところこういう現象が起こりました。以前にも同じようなことをしたことがあるのですが、その時は特に問題はなかったですが・・・・。本当に分かりません。

肝心の解消ほうですが、今回のは以下のような感じで、スクロールバーの内側のほうを消すことができました。

body{
	overflow: visible;
}

/* こっちでも良い */
body{
	overflow: hidden;
}

IE以外のブラウザに影響をでないように、念のためCSSハックでやるのも手かと思いますので、今回はソレで対応。

body{
	*overflow: visible;  /* IE7以下 */
	overflow: visible¥9; /* IE8 */
}

/* IE9 */
body:not(:target){
	overflow: visible¥9;
}

/* IE10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
    body {
       overflow: visible;
    }
}

/* overflow: hidden;でも意図した表示になる */

IE10のCSSハックは次のサイトを参考にしました。
http://www.impressivewebs.com/ie10-css-hacks/