質問: ワードプレスで、liをcalcで3カラム表示させたいのですが、 IEだけカラム落ちしてしまい、正常に表示されません。 ``` width : 33% ; width : -webkit-calc(100% / 3) ; width : calc(100% / 3) ; ``` 上記のようなCSSで chromeやfirefoxなどではきちんと3カラムで表示されますが、 IEでだけ、2カラムで右側に大きくスペースがあいてしまうような表示になってしまいます。 IEでも、2カラムや4カラム、5カラムならきちんと表示できるのですが、 なぜか3カラムだけが表示がおかしくなってしまいます。 IE11で検証しています。 解決法が分かる方がいらっしゃいましたら、 ご教授ください。よろしくお願いします。
回答: ちょっと探した感じではあまり根拠となるソースが見つからなかったので自分で試してみた上での推測でしかないのですが、 「100」は「3」では割り切れませんので、切り上げなど小数点以下の解釈の違いでちょびっとはみ出る分がブラウザによってあるのではないでしょうか? 2,4,5はどんな値でも必ず割り切れますしね。 親も100%だとするとどんなに小さい数字であってもはみ出る分があれば100を超えるサイズになるわけですし。 試しに「width : calc(99% / 3) ;」と割り切れるようにしてみたところ収まるのを確認できました。 ただこれだとブラウザを横に広げれば広げるほど空白部分が大きくなるので調整が必要ですし、 99.99999%とか小数点以下を多めにとる方法もありますがあまりいい解決方法ではないですね。 親要素の幅も含めて分割したい数で割り切れるような数値におさまるよう調整してはどうでしょうか。 参考URL ====== 一応、参考になるか分かりませんが幾つか挙げておきます。 * ブラウザの小数点以下のピクセル(サブピクセル)レンダリングまとめ * レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い * CSSで指定した小数点以下の値はどのようにpxにまるめられるか