【CSS】translateXを使ったときに、IEで表示すると水平スクロールバーが表示されてしまう問題への対処法
![f:id:hiro0164:20180218191418p:plain f:id:hiro0164:20180218191418p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/h/hiro0164/20180218/20180218191418.png)
画像とテキストを重ねて中央寄せするときなどに、translateXが便利でよく使っているのですが、IEだと水平スクロールバーが表示されてしまう事があります。
以下のサンプル(もしくはこのページ)をIEで表示するとサンプルデモの結果表示の下部に水平スクロールバーが表示されてしまいます。(Firefox, Chromeで表示した場合は問題なく表示されていると思います。)
See the Pen translateX by m (@m3816) on CodePen.
この場合の対処法は、以下の通り。
See the Pen translateX with overflow-x: hidden by m (@m3816) on CodePen.
bodyにoverflow-x: hidden
を指定することで水平スクロールバーが表示されなくなります。