まほろば@mahoroba148です。
Web制作をしているとぶち当たるインターネットエクスプローラー（以下IE）問題。
断然Google Chrome派の私はほとんどIEは使わないのですが、まだまだ根強く残っており、実際のところ私の周りはIEを利用している人が多いです。
今日はWeb制作におけるIE対応での備忘録。
【解決方法】position:absolute;がIEだとずれてしまう問題
先に解決方法を言うと、親となる要素の大きさと高さを指定してあげました。
例：親を全面に配置したい場合
width:100%;
height:100%;
position:absolute;は要素同士を重ねたい（たとえば画像の上に文字）ときに便利なCSSです。
私は親（relative）に対して子(absolute)を指定することが多いです。
Chromeでは正しく表示されるのですが、IEだと表示がずれてしまう場合があるようです。
今回の状況から親となる要素の大きさがわからないためにずれてしまうのでは？と思います。
▼今回の状況
- 親は画面全体表示（width:100%で指定）
- 子は親に対して右下に配置したい
- 子が一番下から少し浮いている
margin:auto;に気をつけろ
それでも直らない場合はmarginにも注目してみてください。
過去の私は何を思ったのか、子となる要素にmargin:auto;を指定していました。
中央に表示したいわけではないのにこの指定をしているところでおかしいのですが、なんとなくつけちゃった感がすごいです。
そしてこのmargin:auto;がしっかり働いていました。
思い通りの配置にするにはmargin指定は邪魔になりそうです。