ie6では、heightの指定よりもfont-sizeが優先されるため、
font-sizeの初期値よりも小さいheightは無視されてしまいます!

その為、10px以下など小さい高さを指定したい場合には、


{
font-size:0;
height:10px;
}


という形で記述しましょう。
IEがhtml5に対応していないからと言って、
paddingやwidthなど、旧来のhtmlで使われてるパラメータまで効かないことはない…はず!

だったのに、
まあまあ、困らされました。効かなくて。

標準モードや、互換モードなども調べつつ、
いろいろ調べたりしましたが、
どのページとも違う動作をしてますた。


理由はなんとも単純。

<!DOCTYPE html>





</html>


どこが間違っているかもうお分かりですよね。
なまじhtml5のDOCTYPE宣言がシンプルなために、
htmlタグが要らないかのような罠に引っかかってしまったのです。

よって正解は、

<!DOCTYPE html>
<html>




</html>


という、これだけのことです。
凡ミスも凡ミスですが、
きっとこのミスをするのも僕だけではない…
と信じてます。
IE6は相変わらず鬱陶しいですね…

そろそろ無視できるかなと言いつつも、
地味にシェアを残していて、
プロの仕事としては微妙に無視できない状況が続きます。

デザイン面でとにかく鬱陶しいのが、
「透過デザインを使えない」こと!

対策も数々掲載されておりますが、
使い方がややこしかったり、上手く動作しなかったり…

というわけで、僕が導入に成功した方法をお教えします。

http://www.dillerdesign.com/experiment/DD_belatedPNG/
こちらのページの、
「Download」(ちっちゃいです)をクリックしていただき、
移動したページの「source.js」(もっとちっちゃいです)
を右クリック→「対象を保存みたいなやつ」をクリックしますと、

「DD_belatedPNG_0.0.8a.js」
というファイルがダウンロードできます。


それを適当なところに配置したら、
<script src="ファイルの位置/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix(クラス名orID名);
</script>

コレをコピペしてください。


慣れてる方ならわかると思いますが、
「ファイルの位置」のところには相対パスを。(script/とかですね)
「クラス名orID名」と書いてあるところには、
いわゆるスタイルシートで使うセレクタですね。

クラス「header」なら".header"
ID「wrapper」なら"#wrapper"

といった具合です。
背景を使うブロック要素や、
イメージファイルなどのクラスやIDを指定しましょう。

それだけです!
透過PNG、いろいろ試した中で最も確実な方法です!