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 を設定すると 反応することがわかった。


もし Firefox だけCSSが効かないときは 親要素に対しての設定を考えるといいのかもしれない