CSS IE6.0バグメモ

CSS IE6.0バグメモ

IE6.0でコーディングしなくちゃいけないなくて、困ったときのメモ。詳しいことは、参考にしたサイトを見てください。私もちゃんとわかってないです。実際にコーディングするときのバグ回避メモです。

ボックスモデル

レイアウトが崩れる

 ▼ float,maring,padding,widthの同時指定で、幅がおかしくなる

 ハック仕掛けるしかありません。どれが効くかは試してみるとよい

  • ずれるレイアウトのCSSの行に、「display:inline;」を追加
  • marginの代わりにpadding指定にしてみる

リスト

ul,ol,liの表示がおかしい。リストマーカーなどが表示されない。表示されても全部1.になったり、とにかくおかしい

 ▼ ul,ol,li IE6.0のバグのため正しく表示されない。

 ハック仕掛けるしかありません。よくネットで検索すると

* { zoom: 1; }
ul, ol, li { zoom: normal; }

というように、おまじないように上記のソースをcssに追加すればいいと書いてあったけど、今回の私のケースではダメだった。liにwidthを設定してないのにな。^^; divの下にliがあって…みたいに、間接的にwidthがかかっているということでもない。はて困った。

 今回は、<ul>だと、・がでない。<ol>だと、1.2.3みたいな数字がでない。つまり、インデントだけ効いているというもの。いろいろやって、・は出るようになったけど、数字のほうはなかなか出ない。

 zoom1を使うと、数字が全部1.になっちゃたので、zoom1はあきらめて、別な方法を検索。で、たどりついたのが、こちらの、「display:list-item;」と「vertical-align:top;」の同時指定です。

ol li {
display:list-item;
vertical-align:top;
}

「display:list-item;」をつけて、やっと、1.1.1.みたいに全部1になっていたのが、1.2.3とふつうの数字になりました。でも、数字が行の一番下になっちゃうので、「vertical-align:top;」で、段落リストマークの縦方向の位置を上に指定して、やっと解決しました。

他にもなにかやったかもしれないけど、とりあえず覚えていないので、ここまでメモ書き。

アンカー(hover)

マウスオーバーしたとき、設定したスタイルが適用されない。

 ▼ a タグで、href属性で指定するものがない 

 <a>タグに、hoverでスタイルを設定しても、IE6.0バグ(?)のせいで反映されないみたいみたいです。なんでも、リンクアンカーは、a要素以外のhoverはサポートされていないそうなんですが、a要素でhover指定しても、<a
href="○">というふうに、href属性を設定しないとダメみたいです。

 でも、飛び先がないとき(ページ内移動をさせたくないとき)は、hrefで指定するものがありません。そんなときは、javascriptで「何をしない」という指定をすると、回避できます。

 <a href="javascript:void(0);" …>

 で、[javascript:void(0);]何をしないよってことになるらしいので、リンクが無効になるとのこと。ネットで確認したら、以下ように「return
false;」をつけないと動作がおかしくなると書いてあったけど、今回のコーディングではつけないでも大丈夫だった。

 <a href="javascript:void(0)" onclick="xxx(); return
false;">

 実際、試してみて動作を確認するのがベター。

 ちなみに、 <a href="#" …>とすると、ページ上部に移動しちゃうので、やらないほうがいいと思いました。

バグ回避情報

有益な情報、ありがとうございます。いろいろお世話になりました。このほか、いろんなページで情報あさりましたが、覚えていないので、よく見たところのみリンクさせていただきました。

CSS IE6.0 バグに関する参考サイト>

タイトルとURLをコピーしました