IEでmarginのautoが効かない時の対応方法

4387 ワード
HTML CSS IE HTML テキストリンク

事象 : 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: 0 0 0 auto;
      }
  </style>
</head>
<body>
  <form style="width: 30%">
    <div class="oya_div">
      <div class="rigit">
        <input type="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>
<!--さっきと同じなので省略-->

ほかの原因