IE11でflexプロパティに書いたcalcが機能しないバグ

Advertisement

先日遭遇したIE11のflexbox関連のバグをメモっておきます。周知のバグだと思いますが、自分で書くと脳に定着しそうだしw

バグの詳細

以下のように、flexショートハンド・プロパティのflex-basiscalcを使って値を記述すると、IE11で機能しないため無視されてしまいます(IE10も同様)。

flex: 1 1 calc(25% - 1rem);

対処法

IE11の場合は、以下のようにflexプロパティをロングハンドで記述すればなおります。

flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(25% - 1rem);

IE10に対応したい場合、flex-basisautoにしてwidthcalcを使うと良いらしいです(すみません、テストしてません)。

メモ

  • Edgeでも同様のバグがあったそうですが修正されています。
  • MS Edge Dev でIE10はダウンロードできないんですね。
  • IE10は公式サポート終了してますし、もう対象から外しても良いですよね…

さいごに

コーディングを一通り終えてIE11でページを確認した際にレイアウトがグチャってなってると結構萎えるんですよね。なので、こういう周知のバグは覚えておいて、対処済みのCSSをデフォルトで書けるようにしておくと良いですね。

flexbox関連のバグは他にもたくさんある ので、この際しっかり勉強して対処できるようにしておこうと思います。

Enjoy laying things out with flexbox!

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Twitter @rriver またはFacebook まで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です