IE6でflashの下にある要素が上に出てしまう

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を指定するとこのバグは解消した。

“IE6でflashの下にある要素が上に出てしまう” への10件の返信

  1. ごめん、悪いけど言い訳兼ねて突っ込ませて。
    最後の段落は俺がffに言っている事でもあるよ。
    CSSというよりブラウザの機能不備とかの方だけどね。
    (なくても何とかなるから、ってのはお互い様って話でさ)

    それにまぁ分かっちゃいるとは思うけど、
    「一度出してしまった」実装を変更することは容易ではないよ。
    逆に既存の「成り立ってしまっているもの」を切り捨てる事になるからね。
    利用者に対する責任が大きくなればなるほどフットワークも鈍くなるというもの。
    (自分はむしろバージョンアップ対応の仕事が舞い込んでウハウハとか言うなよ?w)
    まぁMSがそこまで高尚な考えでやっているとは思えないという事だろう。
    UIなんかはコロコロ変えてくるしね、、、。

    ただ、はなっから仕様不全で出来ているファームで、
    「(従来の挙動は全て保証したまま)不具合だけ潰せ」
    などとパッチワークに奔走させられた時の気持ちも分かって欲しい。
    でもって、俺が愚痴ってる部分は「そういうジレンマ無しに改善できるトコでしょ?」
    という思いであった点はきちんと伝えておきたかったもので。

    思想の違いって話は前にしたけどさ、、、。
    極極々一部の信者に釣られて勝手にffに期待していた点は謝ります。申し訳ない。
    お仕事頑張って下さい。

  2. それはわかってるよ。モジラ系はソフトウェアそのものの動作としては怪しいところも多々あって、今日もアドオンのおかげでThunderbirdのアドレス帳の中身がほとんど消えるという肝を冷やす事件があった。アドオン止めたら直ったが、オープンソースのフリーソフトがMSのバイナリに劣るところがあるのは当たり前と思う。それを補うためにフットワークを極力軽くしているのが強みだしね。

    でもさ、もし仕様書に書いてある動作と違う動作をする開発環境でコード書けって言われたら御免だと思うでしょ。実際はW3Cの勧告をベースに書くしかないからその仕様書すら無いのだが。僕が不満を垂れるのはあくまで制作時の不満であって、閲覧時のことはほんとにこれっぽっちも考えてないよ。閲覧はどのブラウザでもW3C勧告に沿っている限り正しく行われて、共通の利益を享受できるというのがあるべき姿だ。そういう状況であれば好きなものを選べばいいからね。しかし実際はぶっとんだ仕様満載のIE6のために製作者が割を食っているというわけ。
    もちろんそういうおかしな仕様に合わせて作られてきたページがIE7になったとたんに全部崩れた!なんてことになったら大混乱なのは分かる。IE5.5か、遅くとも6のリリース時あたりでCSSが標準的になる前にまともなものを出せなかったから今に至ってもダメなだけで、僕もIE7は前世代のIEの被害者と言って差し支えないとは思うのだけど。じっさい、そういう視点で見ればよくやってると言うこともできなくはないが、それって結局「ボタンが変になってタブ機能がついただけのIE6」ってことだからね。各種デバッガやブックマーク周りでははるかにFxとプラグイン群が進んでいるから作るだけの僕には利点が見えない。
    でもIE7がだめなのは実は当然の話で、IE8がSafariやFx3が合格しているAcid2に合格したというニュースが少し前にあったけど、IE8でweb標準準拠のページを表示するにはDOCTYPEだかmetaだかでIE8以降専用だということを明記する必要がある。らしい。IE7で使えるようになったCSSもセレクタとかがせいぜいで、大きな表示系バグはほとんど残っていたのもIE8でちゃぶ台返しするためのつなぎのバージョンに過ぎないと考えると納得がいくよ。どうせ混乱するなら一気にやったほうがいいもんな。
    今回の結論:Vistaファミリーは不憫。

  3. うーむ。
    そういう「どっちが悪い」論争に(意図せず)誘導してしまった事への言い訳だったんだが、、。
    一番気になったのは最後の、
    > 間違いを正そうという努力が見てとれるだけマシというもの。
    この文。
    Fx(こう略すのね)信者を「巨悪に立ち向かう僕たちに酔いしれている」と揶揄している小谷が同じ事をやっているのが不思議でならなくてね。

    そこに関しては俺は「どっちもどっち」のつもりでいたんだよね。
    お互いの立場を鑑みればどちらを責められる話でもないと。

    まぁだから愚痴るなとまでは言わないよ。日記だし。
    でもちょっと落ち着いてくれとは思う。いやお互いに、だけどさ。

    俺はIEもFxもどっちも微妙でしかない現状こそを嘆きたいよ。
    MP3プレーヤの話といい、ソフト業界は核の冬かw
    ま、無理が祟って来てるんだろうなぁ、、、。

  4. 「巨悪に立ち向かう僕たちかっこいい」は揶揄ではなく彼らの歴史でしょ。僕はそれは悪いことだと思わないよ。それとは別に「CSS or Die」という思想は基本的に僕を含めたFx支持者には通底しているもので、そこがまずコンセンサスとして無いから小野にはわからないんじゃないかな。
    「CSS or Die」は冗談ではなくて、CSSが部分実装ながら支持されるのはそもそもの思想が圧倒的に正しいから。モバイルやテキストブラウザを含めたすべてのブラウザにとって福音であることは自明で、それを後退させることは罪悪とさえ思っているよ。だから僕はFirefox信者ではないがCSS信者ではあって、オールドスタイルHTMLは駆逐撤廃されるべきと信じているのです。
    だからIE8の方向性は素直に歓迎したい。仮に多くのオールドスタイルHTMLが余分なメタタグを追記しないと正しく表示できなくても、やるべきだと思っているんだ。ほんとうに大事なのはデザインではなくコンテンツだから。

  5. (これ以上はどうかとは思うが、カウンター当てとかないと嫌だったんで)

    悪い事だよ。悪いけど。
    それってばレジスタンス行為そのものに酔いしれているだけで、
    レジスタンスを成功させる気があるのか? と俺は取っているんだよ。

    未だに引き摺ってしまっているようなので言っておくと、
    確かに俺はCSSというか現行web標準の理解度はまだ低いけど、話したかったのはこの事じゃあない。
    (プログラム言語・設計手法と同様、時代のトレンドとしか見ていない冷めた面があるのは認めます。ただ思想までは軽視するつもりはないよ。)

    前回3の引用突っ込みの所は、言ってしまえばあれは酷く頓珍漢な物言いで、
    Fxがその立場を取れるのは所詮はシェア1.7%?の「その他」でしかないからに過ぎない。
    むしろ先に挙げたような業界への責任も義務も放棄して、自分は全く傷付かない甘い立場で「お前らがやれ」とだけ吠え続ける行為の愚かしさを恥じるべきなのではないかと。

    4のラスト2行も、じゃあその膨大なコストは誰が負担するの?という話になってしまう。
    ただ喧嘩だけ売って「俺は正しい」なんて言っていても白けるだけだよ。
    その含みを持たせての「不思議」だったんだ。

    相手の立場も理解してそれに配慮して行動せねば同意など得られる筈もない、
    これはドクターがよくよく示してくれている事じゃないか。

    Web標準がいつまでも固まらないのは誰の所為?MSだけ? そういう話。

  6. まず、Firefoxのシェアが北米25%欧州29%程度(昨年11月~12月あたり)あるということを忘れないで欲しい。東欧諸国ではなぜか知らないが5割近い。IE6が支配的なのは日本の特殊事情。
    CSSが一般的なウェブサイトで市民権を得たのはIE6、どんなに早くてもIE5.5から。互換モード/標準モードの切り替えもあり、HTMLとCSSはそもそも表示の時点でバージョン管理されており、さらに言えば *CSSはレイアウト記述に過ぎない* 。
    新バージョンへの対応を誰がやるのか?制作者だよ。Fx3では幸いやらずにすむっぽいが、IE7はもう何度もやってる。
    MSはようやくIE8でまともな姿勢を見せているかのようにも見えるが、βバージョンは違うものが出ているという話もあるし、まだ気が抜けないところだろう。コストはWindowsユーザーが負担している上、隣の芝生を力業で乗っ取ったときに好きで負った責任だろ。いやなら降りればいいだけじゃない。
    ExcelやWordが吐くHTMLを見たことがあると思うが、僕らはWebをブラックボックス化されては困る。MSの端末でしかWebが見られなくなったら大喜びする企業だというのを知らない訳じゃあるまい。
    天下獲りができないならレジスタンスを認めないというのは口がすべったのだろうと思うが、ブラウザ戦争なんていう古いくくりではなく、Web標準化のために皆やっているんだろ。僕はIEをやめてFirefoxを使えなんて一言も言ってない。(クライアントにIE7を使って欲しいとは思うけど。CSSとは関係ないが、透過PNGが正しく表示できないとか今時どこの携帯ブラウザですか!)IEが制作の現場でトラブルばかり起こしコストを増大させていると言っているだけ。今回みたいに複数のバグにぶちあたると、僕の仕事の時間単価を軽く半分に下げてくれる。これは誇張ではないよ。IE7でもCSSのハイパスフィルターの必要性が出てきていて、こういう場当たり的な対応を続けていると数年後という近い未来ですら携帯その他の非PC端末のブラウザ開発がどんどん煩雑になる。opacityとかの独自拡張をやめろと言ってるわけじゃない。DOCTYPE宣言を受け入れるならせめて標準的な表示をしろ、ということ。

  7. この認識の違いはどこから来るのかという違和感が消えなかったのだけど、僕と小野とでは重視する機能がまず違うということなのではないだろうか。
    僕はBrowserにはBrowseする機能を求める。その中でも「意図したとおりに表示してくれる機能」が最も大事だと思っている。もちろん挙動がおかしければ怖いからメインでは使わないが、自分の環境でそれが出なければ基本的には気にしない。自分の環境に合ったブラウジング環境でそれぞれ閲覧できるのが正しいと思うので。
    対して小野のほうは「表示系バグがある」ということを重く受け止めない節を感じるのだが、どうだろう。僕は開発者かデザイナーかと言われたら明らかにデザイナーなので表示処理の正確さを重視するし、それを自覚してもいるので最初から「CSSを書く人は」という限定を行っているのだけど、そちらは「内部処理の不都合より見た目を優先する」と捉えて反論しているのではないか?
    開発者としてその姿勢は評価できるが、理想を言えばどちらもおそろかにすべきではないし、これまで書いたように僕は内部処理のためにCSS対応がおざなりになったとは思っていないし既存のhtmlリソースを保護する目的であったとも考えられない。よくよく時間軸を見てみれば、IEがOSにひっぱられて無理のあるタイミングでリリースされてきた、と解釈することは可能かとは思うが、逆にそれだけ外部策定基準を軽視していることの現われと捉えることもできる。
    同情できるとすればIE7への移行が(Vistaの不振もあって)遅々として進まないという点。Windows7でIE8が普及して丸く収まるといいのだけど。

  8. ミスリードの展開っぷりには己の青さを悔いるしかないのだろう。長文自重。
    一つ言うなれば、
    ・レジスタンスの成功=CSSの完全統一

    (あと下手に数値を出したシェアについては「前と話が違う」ってなもんだが、前後関係から来た誤解だね。)

    認識の違いに関して言えば、「何故IEに期待する?」に尽きると思う。
    俺は「IEは変わらないし変えられない」(システム構築者の良心すら及ばぬ)事を説いていたつもり。
    故に、本当にCSS万歳!と言いたいのなら病巣たるIEを食い潰す勢いがあってもいいだろうし、そういう肝心なところで「シェアを握る気はない」と逃げるのは勝手だなとは思う。
    (理想の理想を言えば「歩み寄れよ」とも思ってるけど、お互いにその気はないのだろう)

    それと、
    >新バージョンへの対応を誰がやるのか?制作者だよ。
    俺はこの反応が容易に出せる事自体が「恐ろしい」と思ってます。
    改修/再開発のコストを背負わされるのは顧客だよ? 「おかしくなれば直せばいい」という発想がどれだけ安易な事か。製造にテストに保守に。俺らがやるような些末なバックオフィス系なんて金出ないよ。それをシステム側から強要する事の怖さは感じないものか。
    そしてこれは一般的な話として含みを持たせてしまったものだったんだが、世の中には「既に動いているモノが仕様として引き継がれる」歯痒くも忌々しく馬鹿馬鹿しい世界があるという事をもちっと認識して欲しかった。
    そりゃ俺だってバグは「悪・即・殴打」と洒落込みたいよ。でも作っちまったものはその範囲でやりくりするしかない。「古き悪しきは切り捨てる」、そんな簡単な理想の実現が如何に難しい事かと。システムをコロコロ変える事なんてやっちゃいけないんだよ。申し訳ないけど小谷はあまりこの点にピンと来てない節が前の仕事の時からあったように思う。

    あとこれは言っておいた方がいいと思う。
    ・俺は現状のCSSに首を傾げている
    先日のブロック内配置の話で「他人が見たら分からない」とさり気なく釘を刺したんだけど。そういう事です。そこで既にNG。Webの理想は俺には語れないが、単純にコード体系の話として見ればあれが理想とは思っていない。煮詰まらないままデファクトスタンダードにはなるんかな?くらいには思うけどさ。面白くないよね、お互いに。
    ま、これはまたいずれの話でいいんではないかと。

  9. 何だか余計に拙い結果を招く気がしたのでまとめだけでもさせて下さい。

    前回のキモはつまり、俺のバックボーンに変な思考が混ざっているので話がこじれてしまうのだという事。
    俺にとって正直、「IEもFxもない」のです。どちらも好きになれない。
    だから、好きにならなきゃならない小谷とはどうしても立場が異なる。

    しかし小谷は俺を振り向かせようとしている。でも俺にはその気にはなれないので、逆にその理由くらいは伝えておこうと思ったりはする。それは酷く余計なお世話だし、てっきり分かってもらえているかと思ったのはとんでもない慢心だった。

    人に物を申す事の難しさを改めて思い知った訳ですが。
    それに付き合わせてしまった点は非常に申し訳なく思います。