bootstrap+IE11でレイアウトが崩れる(画像がでかくなる)問題を解決!

bootstrap+IE11でレイアウトが崩れる(画像がでかくなる)問題を解決!

とあるbootstrapを使用しているサイトで、IE11で見ると画像の「img-responsive」が効いていないことがわかりました。
それも、テーブルに入れた画像だけ。

正確には、bootstrapに限らず、display:table-cell;が指定された要素のなかに画像を入れた場合、画像のmax-width:100%;が効かなくなるようです。

最初は単にレイアウト崩れかと思い、グリッドシステムとの関係を調べてみたり、互換表示などをみてみたのですが…

まずはIE11の互換表示設定をチェック

互換表示設定をチェック

IE11においてレイアウト崩れが発生した際、まずは互換設定をみてみます。

IE11ブラウザの右上にある歯車のマークから、「互換表示設定」を選択。
「イントラネットサイトを互換表示で表示する」にチェックが入っている場合は✓をはずす。もしくは、互換表示リストの中にそのページのドメインが入っていれば、それを削除してみます。

これでレイアウト崩れがなくなれば、原因は互換表示設定です。
ソースの<head>内に<meta http-equiv="X-UA-Compatible" content="IE=edge">を入れてみればなおるかと。

でも私の場合はなおらないし、上記のmetaタグもちゃんと入っていました…

tableのなかに入れてる画像のimg-responsiveがきかない!

img-responsiveの親要素にtable-cellが指定されている場合

今回の私の現象がこれでした。他の部分はimg-responsiveが効いているのに、テーブルに入れた画像だけが効いていませんでした。レスポンシブ対応させるために、大きめの画像を用意していますが、それがその大きさのままでていたのです…

解決してくれたのはこちらのブログ記事でした。

<table>に入れた場合でなくても、display:table-cellが指定された要素の中にあるimgのimg-responsiveは、そのままだと効かないそうです。

max-width: 100%;を効くようにするためには、display: table-cell;が指定されている親要素はだいたいdisplay: table;だと思います。その要素にtable-layout: fixed;を指定するとmax-width: 100%;を効くようになります。

ということで、今回私は普通にテーブルタグを使っていたので、<table style="table-layout:fixed;">としてみると、無事IE11でも画像がちゃんと表示されました!!!!

あ~よかった~~~ でも1年以上気づかずこの状態だったってこと…?やばい…

最後に、サンプル表示をお見せします。

Chromeの表示サンプル

普通のグリッドシステムを使っても、テーブルを使っても、見た目は同じです。Chromeでの表示

IE11の表示サンプル

やばい。
IE11での表示

 

制作(デザイン/WEB)カテゴリの最新記事