2012-11-08

ナビゲーションメニューのマウスーオーバーで
背景画像をbackground-positionで変更させるようなものを作成していて、
IE6で確認するとなぜか画像が上に1ピクセルあがってしまってしまいます。

IE6のこの手のバグはいろいろあるのですが、
今回の場合は、PNGをIE6対応にさせるDD_belatedPNG.jsを使っているのが原因でした!

(さらに…)

2010-08-23

fancyboxをちょっと改造していて、IEだけどうにも表示がうまくいかなかったので、
CSSハックを使いました。

IE6、IE7に対応させるのはスラッシュだけでいけるのとかを知らなかったので、
あまりハックに頼るのは良くないですが、覚えておくとやっぱり便利だなと思いました。

参考サイト
http://www.webcreatorbox.com/tech/css-hack-list/

2010-07-30

ある仕事で、画像拡大表示のスクリプトにfancyboxを使用していたのですが、
IE6の場合、1.2.6ではCLOSEボタンなどがちゃんと表示されているのに、
1.3.1にすると表示されていないことに気付きました。

いろいろ調べてみたところ、jquery.fancybox-1.3.1.cssの中にある
IE用画像パス(DXImageTransform.Microsoft.AlphaImageLoaderの部分)は
CSSからのパスではなく、HTMLファイルからのパスでないとダメだったようです。

参考サイト
http://html-study-diary.blog.so-net.ne.jp/2010-04-25

2010-07-29

これまでaタグ以外にhoverを使うような場面はなかったので、
気にしたこともなかったんですが、IE7以上、Firefoxなどでは、
aタグ以外のタグにも、hoverを使うことができるらしいです。

で、問題のIE6なのですが、Whatever:hoverなる有名なものがあるそうです。

参考サイト
http://d.hatena.ne.jp/sa90/20080403/1207653253


さらに調べてみると、Javascriptとして読み込むだけのお手軽なものも発見しました。
http://www.yomotsu.net/lab/javascripts/ie6csshover


実際にhoverでやりたかったのが、透過PNGを背景画像に使うことだったのですが、
DD_belatedPNG.jsを使用すると、どうもhoverが使えなくなることが発覚。
いろいろ試した結果、iepngfix(iepngfix_tilebg.js)を使うことで解決できました!

ちょっと凝ったことをやろうとすると、IE6は本当にやっかいですね。
もう無視しようかな、と思い、クライアントのサイトのAnalyticsを見ると、
IE6使用者がまだ18%もいました。。。
セキュリティ上よろしくないですし、サポートも打ち切られていますので、
IE6を使用しているみなさん、アップデートしてくださいね~

2010-02-12

リストタグの中でaタグをブロック要素にしてfloatを指定すると、IE6で階段状にずれていってしまいます。
aタグには display:blockとwidth、heightなどの指定をいれるだけにし、
liタグにfloatを指定することで正しい表示にすることができます。

2010-02-12

可変のブロック要素の高さを揃えるheightLine.jsが、IE6で効かないときがあります。
それは該当ブロック要素にてpaddingを使用しているとき。
marginなどを使って変更すると無事直りました。

2010-02-10

縦のメニューなどをリストタグで作成したときに、IE6だとなぜか隙間ができてしまいます。
いくつか解決策があるみたいなんですが、とりあえずzoom:1; で解決しました。

2009-12-10

IE6で1pxの画像のラインなどを引こうと思っても、高さが1px以上になってしまいます。

overflow:none;
もしくは
font-size:0;

を入れることによって、ちゃんと1pxになります。