読者です 読者をやめる 読者になる 読者になる

IT業界のすみっこ暮らし

ふと気がついたときの記録

Material AdminのIEスクロールバー非表示問題

Material design

Introduction - Material design - Material design guidelines

Material Admin

最新のBootstrap3をベースにしたGoogle Material Designから触発された強力で軽量な完全レスポンシブで高解像度に対応した管理テンプレート


要はこれを使えばそれっぽいマテリアルデザインのサイトが表現できるということだが…

なぜかIEでスクロールバーが表示されない…

どこのcssが邪魔してるのか分からないため、範囲を絞りつつ犯人探しをして、原因発見。 これはもしかしてレスポンシブ対応を考慮して最初から水平スクロールは全部NGにしてたのかな?

修正前

html {
  overflow-x: hidden\0/;
  -ms-overflow-style:none; // noneからautoに変更
}

修正後

html {
  overflow-x: hidden; //意図があるのかも知れないけど、気になったのでhiddenに修正
  -ms-overflow-style:auto;
}

おそらく直接邪魔してたのは「-ms-overflow-style」だったと推測する。
html単位でスクロールスタイルが「none」になっていたからその後、overflow-xでスクロール設定をいくら追加してもIEだけは非表示になってたと思われる。


解決後に見つかった海外で同じ問題にハマった人の例

my.oschina.net


参考サイト
http://xn–lcki7of.jp/762/xn--xnlcki7of-r89d.jp