タグ: CSS

flashのembedとかselectにはz-indexが作用しなくて、flashが上に出てきてしまうという話はよく目にするのですが、今回はその逆でembedしたflashが上にでないで困ったという話

<div id="bigdiv">
<div id="leftdiv">画像</div>
<div id="rightdiv">画像</div>
<div id="flashdiv">flash</div>
</div>

おおざっぱに書くとこんな感じで、bigdivは画像二つを横に並べた大きさで、
position=relative
が設定してあり
leftdivとrightdivはそのままなりゆきでfloat、その後にflashをposition=absoluteでbigdivを基準に（bigdivと同じサイズで）top leftを0 0で描画する。flashにはtransparentで透過処理をしてあるので下にある写真二枚をカバーするようなflashだ。MozillaやIE7では正しく出るのだが、IE6では出ない。IE6っていまだにシェアトップを譲らないので無視できないのが悲しいところ。みんなはやく騙されてIE7にしてほしい。
結果から言うとこのバグにひっかかっていただけなんだけど、まさかfloatが原因とは思わず（ずっとz-index問題だと思っていた）ひさびさにハマりました。あ、このときもう一回IEでレイヤーの透過処理をfilter:opacityでやったときに黒が部分的に抜ける（opacityが問答無用で0になってしまう）という恐ろしいバグにも出会った。IE6と7で出て、海外のサイトで似たような症例を見たが報告例は少ないようだ。これはimage::magickで生成している画像にガンマ値補正を1.5ずつかけるという後ろ向きの対処でなんとかなった。
話がそれました。冒頭のバグの対処法は「下に入っているleftdiv、rightdivもabsoluteで配置」でした。これならfloatを指定したままでも問題ないです。そのfloatに意味があるのはさておき。

あ、あとこの仕事では、liタグの高さがある一定のheight以下では制御できず、liの中身に何も入っていなくてもline-heightを指定しないと無駄なマージン（実際はliのheightが下がっていないだけ）が出るというのもあったな・・・
しかしこうして見てみると今回IEバグ引きすぎ。これはこれと関係ありそうだけどIE7でも出た。こういうあからさまな間違いをいつまで経っても直さないで放置するから、CSSを書く人はIEを嫌いにもなります。Firefoxにももちろんバグはあるけれど、間違いを正そうという努力が見てとれるだけマシというもの。

’08 7 20追記
photoshuffler.jsを上記のleftdiv・rightdivと画像部で使っているとき、以下のような処理が行われているのだが
1・最初に配置されている画像読む
2・divのバックグラウンドに次の画像を読む
3・前面のimgをフェードアウト
4・0になったらバックグラウンドをimgに置き換えてopacity100%
・・・以下2以降を繰り返し
どうもこのときにIE6と7ではimgが1ドット下にずれて表示される。Photoshufflerはスライドショーのjsなので、3から4の処理に入るときにガクっとずれることになる。原因は不明。floatにしなくても出るので上記のバグとは関係ないか、バグの原因がさらに深い部分にあるのか。原因はわからないながらimgに縦横の値を設定し、display:blockを指定するとこのバグは解消した。