エスエムティの愉快な仲間たち

こんばんはばさっちです。
calc関数って便利ですよね!!

いちいち面倒な計算とかしなくてもいいし記述方法も簡単だし、
いままではこういったサイトweb計。を利用しながら計算していましたが、
最近はずっとcalc関数を使用しています。

ただやっっぱり注意しなきゃいけないのがIE※Edgeもなんですよね!!
簡単にカラム崩れを回避できる方法をご紹介いたします!!

通常の使用方法はこう!!簡単に3分割になりますね!!

ul li {
width: calc(100%/3);
}

ただしこのままだとIE※Edgeがうまく機能しないので下記を追加します。

_:-ms-input-placeholder, :root .selector,
ul li {
width: 33.33%; /* IE用 */
}

これできれいに3分割することができました！！
ひと手間ですがIEハックを使ってcalc関数を上手に使いこなしましょう!!