IE シリーズでは Javascript の getYear() で得られる値が他のブラウザと違います。
例えば Firefox や Safari などでは 110 と取得できるのに、IE では 2010 と取得できてしまいます。そのため、各ブラウザで同じ値を得るために以下のような処理を挟む必要があります。

1

if (year < 2000) { year += 1900; }

ちなみに、先程 Twitter で教えてもらったんですが、getFullYear() ってのを使う方法でも良いみたいです。そういえば昔はこれを使っていたような気がします。何がなんだか分からなくなってきました！

jquery.pngFix.js で以下のようにしてたら、突然画像が大きくなってボヤけてしまいました。

1
2
3
4
5
6
7

<script type="text/javascript" src="js/jquery.pngfix.js" charset="utf-8"></script>
<script type="text/javascript">
$(function($) {
	$("h3 > img").pngfix();
});
</script>
<h3><img src="images.png" width="66" height="18" /></h3>

実際に Javascript で書き換えられたソースを見てみましょう。

1

<span style='DISPLAY: inline-block; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="scale", src="images.png"); WIDTH: 82px; LINE-HEIGHT: 0; HEIGHT: 18px' jQuery1269915814671="10"></span>

背景にして AlphaImageLoader 使ってたんですね。きっとこの中の CSS がしっかり効いていないのでしょうか。いろいろ探ってるうちに、line-height が効いていないことが分かりましたよ。

なので、span 要素に大して、再度 line-height をかけてあげましょう。

1
2
3

h3 span {
	line-height: 0!important;
}

以前作った人の css が何か悪いことをしているのでしょう。span 要素や div などに大して直に何か指定されていたのかな。何はともあれ、IE シリーズは困ったちゃんですね。IE 作った人も困ったちゃんです。

以下のように記述すると IE6 でだけ無駄な改行が発生します。いつもながら独自の世界を駆け抜ける IE シリーズには楽しませていただいております。

1
2
3
4

<ul>
<li><span style="display:block;">テキストA</span></li>
<li><span style="display:block;">テキストB</span></li>
</ul>

解決策は一つ目が以下のように HTML を書く段階で改行させない方法。まぁ IE6 のために時間を潰すのは面倒なので、とりあえず一応以下のように書いた方法だけで正常に表示されるのを確認しました。

1

<ul><li><span style="display:block;">テキストA</span></li><li><span style="display:block;">テキストB</span></li></ul>

あと二つ目は li に padding: 1px; を指定する方法です。隙間が入ってうまい具合にデザインできないのでイライラしますねー。

私は個人制作では IE6 で li の中にブロック化した要素が入っているコンテンツは非表示にします。もしくは放置します。たぶん IE6 を使っている人はこのブログを読んだりしないと思うし、IE6 をバリバリ使ってる人に読んで欲しいとも思わないーなんてことを思ってるわけでもないですが…(笑) 心の奥底では思ってるかもしれませんね…。

IETester は IE5.5 IE6 IE7 IE8 を同時に確認できるアプリケーションです。IE6 で表示確認するためにわざわざ XP を起動したりする必要もこれでなくなります。

IETester をダウンロード

これがなければ IE6 と IE7 を同時に PC 内で起動したり、IE6 の入った PC を別で起動したり、IE5.5 での表示確認は諦めたりといろいろ大変なことばかりだったと思います。これで IE の脅威を半分くらいに抑えられますね。

ちなみに更新をするとページが表示されなくなったり、一定時間たつとエラーで終了してしまったりといろいろ問題もあるみたいなので、完璧とは言えないです。でも少しずつ Web 全体も進化してきてるみたいで毎日が楽しいですねぇ。自分も早く人の役に立つものを作って、世界をよりよくしたいです。

IE では border で 1px の点線を引くと、スクロールしたりしたときに線と線がくっついて見栄えが悪くなってしまうことがあります。私は Firefox では問題なく表示されるし、たまにしか表示されないので気にしていなかったのですが、今日お客さんから直してくれと頼まれたので直すことになりました。

わざわざくっつかない線を表示するために画像を使うのは嫌なので、CSS でなんとか出来る方法を探していたら以下の方法を発見しました。
タグメモのカケラ | IEで、ボーダーがうまく表示されない

点線を指定している id や class に対して position: relative を指定すると良いそうです。

1
2
3
4
5
6

hoge {
margin: 10px 0;
padding: 10px;
border: 1px #dddddd dashed;
position: relative;
}

でも私の環境では何も解決されませんでした。解決できなかった人は border を 2px にしたりすると解決されますのでいろいろ試してみるのも良いかもしれませんね。何か他にも方法があったら教えてほしいです。

HTML では空白をいくつ入力しても一つとしてカウントされますが、以下の記号を使えば強制的に空白を作ることが可能です。今回の記事は All about を参考にさせていただきました。

1
2
3
4

 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。

上記のHTMLソースは以下のようになっていますよ。

1
2
3
4

 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。

これの良いところ基本編は All about に書いてありますので、そちらを参考にしてください。ここでは良いところ応用編を説明します。

空白文字が使える場面

私が今日体験したことなんですけど、Table でカレンダーを作るときとか、表を作るとき、background でカラーを設定して、table に cellspacing=”1″ を入れることによって、td と td の間に線を入れている(正確には隙間から背景色が見えるだけ)場合であれば問題ないのですが、border を使ってカレンダーや表を作っているときであると、td に何も入力されていない場合、IE6 および IE7 では border が出てこなくなります。そういうときに何も入力されていない td に空白文字を含めると、IE シリーズでも border を表示させることができますよ。

IE6 には box の中で float を使うと背景画像が欠けてしまったり、ずれて表示してしまうなどのバグがありますです。このバグは box に width を指定することによって解決できるようです。

普通のプログラムのようにアンインストールすることができませんでした。
VISTAの場合なら、コントロールパネル→プログラム→インストールされた更新プログラムを表示→Windows Internet Explorer 8を選択してアンインストールできます。

IE6はアルファ画像(透過png)が使えませんが、今回紹介する方法で簡単にIE6でもアルファ画像を使うことができるみたいなので、いつも通りメモしておきます。
ちなみに透過を活用することによって、さらにデザインの幅が広がるかもしれません、あー楽しみかもです。透過を活用したウェブデザインは以下のサイトでいろいろ紹介されています。
透過をきれいに使ったウェブデザインいろいろ | DesignWalker (続きを読む…)

今回はIE PNG Fixを使ってみたので、使い方をついでにメモしておきました。ちなみにIE PNG Fix 2が去年登場してるみたいなので、ここではIE PNG Fix 2の使い方を紹介します。
IE6 透過PNG表示、IE PNG Fix 2登場 | エンタープライズ | マイコミジャーナル (続きを読む…)