IE6でmax-widthを実現するためのjQuery

IE6はCSSプロパティのmax-widthに対応していません。

min-widthならIE6の独自仕様である「ボックスの拡張(内包要素が親要素の横幅を拡張)」を利用すれば比較的簡単に実現できますが、max-widthは色々工夫しないとできません。

以下はコリスさんの記事。

ただ、応用しづらいというのが本音です。そこで、jQueryのお世話になります。

以下のjQueryコードは、ページ内のimg要素が親要素よりも大きい場合にstyle="width: 100%;"を追加する例です。これで、img {max-width: 100%;}が実現できます。

$(function(){
  $('img').each(function(){
    $(this).wrap('<div style="width: 100%; overflow: hidden;"></div>');
    if($(this).width() > $(this).closest('div').width()) {
      $(this).attr('style', 'width: 100%;');
    }
    $(this).unwrap('<div style="width: 100%; overflow: hidden;"></div>');
  });
});

上記のコードを解説すると、以下のようなことをやっています。

  1. 3行目でmax-widthを指定したいimg要素の親要素として、style属性付きのdiv要素を追加します。
  2. 4行目でimg要素と追加したdiv要素の横幅を比べます。
  3. 追加したdiv要素よりもimg要素の横幅が大きければ、5行目でimg要素にstyle="width: 100%;"を追加します。
  4. 7行目で追加したdiv要素を削除します。

5行目の.attr().addClass()に変更すれば、CSSファイル側でも操作できるようになるので、結構応用できると思いますよ。