2. CSS
  3. 【IE11以前】flexboxでaligin-itemsとmin-heightの組み合わせが効かない
【IE11以前】flexboxでaligin-itemsとmin-heightの組み合わせが効かない
css

【IE11以前】flexboxでaligin-itemsとmin-heightの組み合わせが効かない

どうも、Tommy(@SitommyBlog)です。

Firefox、Chrome、Edgeでは問題なく表示するが、IE11以前ではうまく表示されない。
全て同じように表示できるようにするために試行錯誤してうまくできたので、記事にしようと思います。

表示したいこと

まず、どのように表示したいのかを図で表します。

このようにボタンが並んでいて、ボタンの高さは揃えつつテキスト量が違う。
jsは使わず、対応したかった。記述はこのようにしました。

HTML

<div class="m-column3">
  <div class="m-btn">
    <a href="">Sitommy</a>
  </div>
  <div class="m-btn">
    <a href="">Sitommy<br>Sitommy</a>
  </div>
  <div class="m-btn">
    <a href="">Sitommy<br>Sitommy<br>Sitommy</a>
  </div>
</div>

CSS

.m-column3{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.m-column3 > *{
  max-width: 33.33%;
  width: calc(100% / 3 - 20px);
}
.m-btn a{
  display: flex;
  align-items: center;
  min-height: 75px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #80aebf;
  position: relative;
}
.m-btn a::after{
  content: "";
  width: 10px;
  height: 10px;
  margin: auto;
  border-top: 2px solid #80aebf;
  border-right: 2px solid #80aebf;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  transform: rotate(45deg);
}

flexboxでボタンを整列させ、またaタグに対してもflexboxを指定しalign-itemsでcenter合わせにしています。

IE11では

IE11だとcenterにならずテキストが上がった状態になります。

ここから対処方法です。

CSS

.m-btn a{
  display: flex;
  align-items: center;
  height: 75px; /*ここ*/
  padding: 0 20px;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #80aebf;
  position: relative;
}

min-heightからheightに変更するだけでcenter合わせになりました。
がしかし、min-heightじゃないとダメな時はどうするか。。

いろいろ試行錯誤した結果。

HTML

<div class="m-btn">
  <a href=""><span>Sitommy</span></a>
</div>

CSS

.m-btn a{
  display: flex; /*ここ*/
}
.m-btn a span{
  display: flex;
  align-items: center;
  min-height: 75px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #80aebf;
  position: relative;
}

flexboxでcenter合わせにしたい要素をflexboxで囲うとうまく表示できました。
なんか、個人的にはコードを書いてて気持ち悪いなと感じました。

最終奥義

flexboxを使用しない。これに尽きる。HTMLは初めと同じとします。

HTML

<div class="m-column3">
  <div class="m-btn">
    <a href="">Sitommy</a>
  </div>
  <div class="m-btn">
    <a href="">Sitommy<br>Sitommy</a>
  </div>
  <div class="m-btn">
    <a href="">Sitommy<br>Sitommy<br>Sitommy</a>
  </div>
</div>

CSS

.m-column3{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.m-column3 > *{
  max-width: 33.33%;
  width: calc(100% / 3 - 20px);
}
 
/*　↓ここから変更　*/
.m-btn{
  display: table;
  min-height: 75px;
}
.m-btn a{
  display: table-cell;
  min-height: 75px;
  padding: 0 20px;
  vertical-align: middle;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #80aebf;
  position: relative;
}
.m-btn a::after{
  content: "";
  width: 10px;
  height: 10px;
  margin: auto;
  border-top: 2px solid #80aebf;
  border-right: 2px solid #80aebf;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  transform: rotate(45deg);
}

と書くことがベストだと思います。これなら全てのブラウザに対応可能で無駄なタグなどなく気持ちが良い。flexboxで指定することがとても楽で頻度が高くなりがちでしたが、少し反省をしなくては。。。と思う今日このこの頃です。

おまけ

IE10、IE11のみに適用するCSSハックというものがあります。
『@media all and (-ms-high-contrast:none)』で、CSSを囲むだけです。

@media all and (-ms-high-contrast:none){
/* IE10,11に適用する */
}

ですが、こちらは使用しないようにしましょう。この手法は不完全であるがためです。
これは、Windowsのハイコントラストモードの状態を判別するメディア特性であるためです。

Microsoft独自のもので、IE、Edgeのみ対応していて有効なものではあるが、IEとEdgeには少し違いがあります。
それは、

IE

IEでは、ハイコントラストモード『active』・黒地に白のハイコントラスト『white-on-black』・白地に黒のハイコントラスト『black-on-white』・そしてハイコントラストなし『none』のいずれかの設定がある。

Edge

Edgeでは、『none』以外設定がある、

つまり、Edegがnoneの設定がないため、『@media all and (-ms-high-contrast:none)』このハイコントラストモードなしの場合という設定でCSSハックすると、Edgeは崩れるということです。

では、『@media all and (-ms-high-contrast:active)』を設定するといいのかっとなりそうですが、残念ながらアウトです。

なぜなら、ハイコントラストモードがactiveになっているか否かは、閲覧者が設定することであり製作者側は設定できない。そのため、Egdeがある現在は使用しても完全ではないということです。

今後、IEのサポートが正式に外れEdgeが主流となった場合、こんなことは考えなくて良くなるのに。
ただ、中小企業や昔ならではの会社で古いwindowsを使っている限り、制作現場では、特にコーポレートサイトを制作する際、IEから逃れることはなかな難しいのかな。

以上、IE11でflexboxでaligin-itemsとmin-heightの組み合わせが効かない対処法でした。

css

Related

Ranking

目次