OCテックノート

IE6で横幅が正しく表示されない

IE6でだけ、普通にスタイルやHTMLを表示させてもずれていることがあります。
多くの原因は、IE6が解釈する、横幅がほかのブラウザと違うことに起因します。

横幅を指定するために width を指定します。
通常のブラウザは、widthは要素の中身だけの横幅です。
しかし、IE6では、要素の中身＋paddingの横幅を足してしまうのです。

これを回避するための一番簡単な方法は、HTMLドキュメントを「標準モード」にすることです。
言い換えれば、「互換モード」にしないことです。

「標準モード」、「互換モード」の指定方法は、下記のリンク先などを見てみてください。
http://www.dspt.net/html_tag/mode.html

IE6では半透明のPNG画像がうまく表示されません。透明の箇所は灰色のような色になってしまいます。
これをなんとかする方法はいくつかありどの方法も一長一短なのですが、今回はjquery.pngFixというjQueryのプラグインを紹介します。

jquery.pngFix
http://jquery.andreaseberhard.de/pngFix/

1．上記サイトからjquery.pngFix.jsを入手し、jQueryの最新版も用意します。
2．HTMLからjQueryとjquery.pngFix.jsを読み込みます。

 <script type="text/javascript" src="http://xxx.co.jp/jquery-1.x.x.js"></script> 
 <script type="text/javascript" src="http://xxx.co.jp/jquery.pngFix.js"></script>

3．半透明にしたい箇所をclassを設定しておきます。
今回はclass=”pngfix”としておきます。
4. Javascriptで次のように指定します。

 <script type="text/javascript">
 //全てドキュメント、画像を読み込んだら自動実行
 $(window).load(function(){
 //class="pngfix"内の画像全てを半透明にする
 $(".pngfix").pngFix();
 });
 </script>

今回のソースを全て書くとこんな感じになります。

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquery.pngFix.js"></script>
  <script type="text/javascript">
   //<![CDATA[
   $(window).load(function(){
   $(".pngfix").pngFix();
   });
   //]]>
  </script>
 </head>
 <body>
  <div class="pngfix">
   <img src="images/test.png" alt="testing" />
  </div>
 </body>
 </html>

注意点は
・幅・高さをきちんと指定する
　画像の幅・高さが拡大縮小されてしまい、画像が崩れてしまうことがあります。
・font-sizeを小さくします
　font-sizeが画像の幅・高さより大きい場合、画像が崩れてしまいます。
・$(document).readyではなく$(window).loadを使う
　$(document).readyはドキュメントを読み込んだら実行するため、画像の読み込みが終わる前に半透明の処理をする場合があります。
　そのため処理速度の遅いPC（Atom搭載機）等では画像が崩れることがあります。
・imgタグとbackgroundのみにしか有効じゃない
　ulのlist-style-mageで指定された画像は半透明になりません。
・IE Developer Toolbarを入れる
　割と安定しているプラグインですが、それでも微妙に半透明後に位置がずれたり、縦横の比がおかしくなってしまうことがあります。
　このプラグインはIE6でしか動かないため、Firebug等のIE6以外の便利ツールを使うことができません。
　IE6用のツールを入れておかなければハマってしまうことがあります。
　ちなみに内部の処理的には元のimgタグをdisplay:noneにし、spanで半透明に対応した画像を差し込むというようなことをしています。
　imgタグのCSSではなく、該当箇所のspanを調整することがあります。

SEO対策的にはJavascriptをHTML内に書かないほうがよいので、外部ファイル化するやり方も書いておきます。

1.下記のコードを、start_png_fix.jsなどというファイル名で保存します。

 function start_png_fix() {
 	$(window).load(function(){
 		//class="pngfix"内の画像全てを半透明にする
 		$(".pngfix").pngFix();
 		});
  }
  
 window.onload = start_png_fix;

2.jquery.pngFix.jsの後に、start_png_fix.jsを読み込みます。

 //サンプル
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/jquery.pngFix.js"></script>
 <script type="text/javascript" src="js/start_png_fix.js"></script>

IE6で隙間ができてしまう

IE6で横幅が正しく表示されない

IE6で横幅が正しく表示されない

IE6で半透明の画像を表示する

IE6でテーブルのセルの隙間があいてしまう

IE6では対応していない要素