Firefox で max-width が効かないときの解決法
親要素に width:100%; を指定する
ブートストラップでレスポンシブデザインを取り入れたサイトを作った時に
画像に対して img-responsive を設定すると画像が画面幅に応じて大きくなったり
小さくなったりするはずだったがなぜかFirefoxだけ効かずにレイアウトが崩れる
img-responsive には max-width:100%; が設定されているのでこれがなぜか効いていないということなので検索してみると
親要素の display:table をしている要素に table-layout:fixed を指定する事で回避できる
という記事が多く見られるが、今回はこれには当てはまりそうになく、困ってしまった。
100% というのは当然親要素に対する100% だと考えるので ウェブインスペクタで親要素のスタイルを確認してみると特に width に対しての設定はない。
ということは 当然 autoが適用されていると考える
この辺が怪しいと感じたので試しに 親要素に対して適当な width を設定してみると
反応した!
width の設定が書かれていればいいのかと思って、あえて width:auto; を指定してみると
動かない;
ということは 親要素の width の設定が auto になっていると max-width:100%; は効かないということなので、影響のない width:100%; を親要素に指定してみると 画像がちゃんとレスポンシブ仕様になった。
似たようなことが以前にもあった。
CSSで 3D のスタイルを試していた時に 親要素に perspective を指定していたが なぜか
Firefox だけ 効いていない;
ウェブインスペクタで色々いじってみると 直前の 親要素に perspective を設定すると 反応することがわかった。