ワードプレスで、liをcalcで３カラム表示させたいのですが、
IEだけカラム落ちしてしまい、正常に表示されません。

width : 33% ;
width : -webkit-calc(100% / 3) ;
width : calc(100% / 3) ;

上記のようなCSSで
chromeやfirefoxなどではきちんと3カラムで表示されますが、
IEでだけ、2カラムで右側に大きくスペースがあいてしまうような表示になってしまいます。

IEでも、２カラムや４カラム、５カラムならきちんと表示できるのですが、
なぜか３カラムだけが表示がおかしくなってしまいます。
IE11で検証しています。

解決法が分かる方がいらっしゃいましたら、
ご教授ください。よろしくお願いします。

m.ts10806

2017/05/29 01:09 編集

HTMLも念のため提示してもらえませんか？CSSについても他の親要素などのCSSの影響もないとは言えませんので。

行動規範の内容に同意します

回答2件

ベストアンサー

こんにちは。

単純に3カラムを均一割りで表示したいのならdisplay:flexを使用すれば解決するのかなと思います。

親要素にflexを指定し、子のカラムに対して**flex-grow: 1;**を付与します。

html
1<section>
2  <div>カラム1</div>
3  <div>カラム2</div>
4  <div>カラム3</div>
5</section>

css
1body,html{
2padding:0;
3margin: 0;
4}
5section{
6display: flex;
7align-items: center;
8justify-content: center;
9align-items: center;			
10}
11div{
12flex-grow: 1;
13}

※ベンダー記載してないので、必要に応じて追記してください。

ちなみにIE11とその他ブラウザで差分が出ているのは少数点以下の値の表示扱いが異なる部分が影響しています。

どうしてもflexboxは使いたくなくcalcでの解決望むなら

css
1body,html{
2padding:0;
3margin: 0;
4width: 100%;
5overflow: hidden;
6}
7section{
8width: 102%;
9text-align: center;
10}
11div{
12width : 33% ;
13width : -webkit-calc(100% / 3) ;
14width : calc(100% / 3) ;
15display: inline-block;
16}

overflow:hiddenで強引にやっちゃうとかですかね。
正確に均一じゃない表示ですが。。。

投稿2017/05/29 01:47

kogure

総合スコア299

momocan

2017/05/29 04:29

ありがとうございます。後者のほうの方法で解決できました！

行動規範の内容に同意します

ちょっと探した感じではあまり根拠となるソースが見つからなかったので自分で試してみた上での推測でしかないのですが、
「100」は「3」では割り切れませんので、切り上げなど小数点以下の解釈の違いでちょびっとはみ出る分がブラウザによってあるのではないでしょうか？
2,4,5はどんな値でも必ず割り切れますしね。
親も100%だとするとどんなに小さい数字であってもはみ出る分があれば100を超えるサイズになるわけですし。
試しに「width : calc(99% / 3) ;」と割り切れるようにしてみたところ収まるのを確認できました。
ただこれだとブラウザを横に広げれば広げるほど空白部分が大きくなるので調整が必要ですし、
99.99999%とか小数点以下を多めにとる方法もありますがあまりいい解決方法ではないですね。
親要素の幅も含めて分割したい数で割り切れるような数値におさまるよう調整してはどうでしょうか。