2011年10月02日

IE9の全角スペース問題

 行頭の字下げにこれまで全角スペースを使ってきた。
 それで何の問題もなかったのだが、Internet Explorer 9 では行頭の全角スペースを無視する、という振る舞いをすることがわかった。なぜそんなことをするのか意味はわからないが、とにかくそうなっているのだから、対応せざるを得ない。

  で代用

 最初は素直に全角スペースを   で代用してみたが、なんとこれも無視される。
 こうなると、ますます意味がわからない。" " と書くということは、「ここにスペースをいれます」と明らかに宣言していることになる。それを無視するとは何事だろうか?

苦肉の策

 仕方ないので、何か目立たない文字で置き換えるか……と思案していて思いついた。
 全角文字の何かで置き換えて、色を透明にすればいいのでは。
 試してみると、これがまぁ、なんとかうまく行ったので、記録しておくことにした。
 これまで書いた膨大なページを手作業で置き換えるのは馬鹿げているので、以下のようなスクリプトを onload で実行することにした。

 // IE 判定
 var ieVer = (function(){
  var undef, v = 3, div = document.createElement('div');
  while (
   div.innerHTML = '<!--[if gt IE '+(++v)+']><i></i><![endif]-->',
   div.getElementsByTagName('i')[0]
  );
  return v> 4 ? v : undef;
 }());
 // 空白置換
 if(ieVer>=9) {
  var obj = document.getElementsByTagName('body').item(0);
  obj.innerHTML = obj.innerHTML(/ /g, "<font color='transparent'>・</font>");
 }
※この記事自体も、このスクリプトを通っているため、上記の "/ /g" の部分は "/・/g" に置き換わっています。コピペする場合は 全角スペースに置き換えてください。

 一部ブラウザでは透明指定がうまく動作しないため、ここでは IE9 の場合だけ処理するようにしている。
 スタイルシートを利用した字下げを行うのが本筋なのだろうけど、これまたブラウザによって動作が異なって、うまくいかないことが少なくない。このため 全角スペースを利用した字下げというベタなやり方をしていたのだけど、これさえも通用しなくなるとは思ってもいなかった。
 またしても、IE にやられた、という思いばかりが強くなるのである。



posted by tekniq at 17:09 | Comment(0) | TrackBack(0) | HTML/css/php/perl/javascript