事象 : IEでmarginのautoで設定した右寄せが効かない
ChromeとEdgeとFirefoxは右寄せになるのにEdgeだけ左寄せになる。
<!DOCTYPE html><html><head><title>marginのautoが効かない</title><style type="text/css">.oya_div{display:flex;flex-direction:column;border-style:solid;padding:2%;}.rigit{margin:000auto;}</style></head><body><formstyle="width: 30%"><divclass="oya_div"><divclass="rigit"><inputtype="button"value="ボタン"></div></div></form></body></html>原因 : IEでは親のflex-direction: column;に邪魔されてmargin: 0 0 0 auto;が効いていない
oya_divではdisplay: flex;とflex-direction: column;を指定している。
開発ツールでflex-direction: column;を外すとmargin: 0 0 0 auto;が効いて右寄せになる・・・。
対応 : 寄せの設定をtext-alignでする。
IEでmarginのautoが効かない事象はよくあって理由もいろいろだが、text-alignを試したらいけた。margin: 0 0 0 auto;と合わせて使ってもいいがtext-align: right;だけで右寄せになるので、margin: 0 0 0 auto;は削除した。
<!--さっきと同じなので省略-->
.rigit {
text-align: right;
}
</style><!--さっきと同じなので省略-->
ほかの原因
- mainタグの問題
display:flex;とposition: fixed;の問題- その他
