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 バグに関する参考サイト＞
