IE11だけmax-width: 100%;が効かない

お絵かき掲示板BBSNoteのカタログモードのモバイル端末対応作業を行いました。

BBSNote カタログモード iPhone iPad ScreenshotBBSNote カタログモード iPhone iPad Screenshot

iPad、iPhoneをChromeでエミュレート。

モバイル端末で問題なく表示できればそれでいいのかもしれないのですが、IE11で横幅を狭くしてみると…。

BBSNote カタログモード IE11

セルの幅に合わせて画像が小さくなる筈なのに…。
横スクロールバーがでてしまいました。
max-width: 100%;
が効かないようです。
width: 100%;
にすると…。

BBSNote カタログモード IE11

横スクロールバーはでなくなりましたが、元のサイズより大きく表示されてしまう画像が…。
max-width: 212px;
にすると…。

BBSNote カタログモード IE11

問題ないようです。

解像度が低い時は
width: 100%;
でも、元の画像より大きくならないし
max-width: 212px;
のように書く時は、CSS3で解像度別にセルの幅を決めてから、画像の最大幅を指定するようにすれば…。

IEで横幅を狭くした時にも、期待通りの表示になるようにCSSを書き直しました。

IEのようなレガシーなブラウザは切ってしまえばいいのに…と言われそうですが、お絵かき掲示板なのでJavaが使えるのはIEだけという事情も。
HTML5のPaintBBS NEOをつかっている方がほとんどなので、Java対応も切ってしまってもいいのかもしれないのですが…。

そして、その他のページでも…。

お絵かき掲示板交流サイト IE11

IEで横幅を狭くしてみたら…。表示が崩れて…。

お絵かき掲示板交流サイト IE11

max-width: 100%;
width: 100%;
に書き換えて対応しました。

お絵かき掲示板はこちら。

この記事へのコメント

コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。