REDLINE MAGAZINE | IE6 → 透過PNG+overflow=混ぜるな危険(追記有)REDLINE MAGAZINEトップページへ

すべてのエントリを見る

IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

>>081205:追記 解決しました

(追記:081205)はてブのコメント見たらこの下記の症状が出ない方もいらっしゃるみたい。私が検証に使ってるIE6はIETesterのものと「IE6 standalone の落とし穴」っていう記事で書いた透過も使えるこっちのスタンドアローン版IE6なんだけど、もしかしてもしかして正規版では正常に動作してるとか??コメント書いてくださった方が正規版IE6なのかどうかは分からないけれども、一応その件も補足しとこかなということで追記。

正規版IE6では何も問題ないそうです。お騒がせしてすいません!

やりたかった事

  • 親ボックスには大きめの写真を入れたい。
  • その親ボックスの写真は背景じゃなく、諸事情でimgタグで入れること。
  • その中にまたボックスを作って背景に透過PNG画像を使用してテキスト本文入れたい。親ボックスの写真が透ける感じで。
  • そのテキスト本文部分は幅高さ固定のボックスで内容量が多いときはスクロールする。

つまり見た目はこういう感じ。
サンプル

実際にはそういう半透明なボックスがこのimgで入れた写真の上に他にもいくつかある感じ。とりあえず今回は1個でいきますね。

要望を聞いて脳内コーディングした結果、親ボックスdivにrelative与えて普通にimgで写真入れる。その後インナーのボックスをabsoleteでそれぞれ定位置に配置しよう。IE6の透過PNGの処理はfilterで。よっしゃ、かかってこいや。(0.19 秒)

とりあえずサンプルいきます。

その時点での脳内コーディングを実際再現したhtmlとcssがこんな感じ。

<style type="text/css"><!--
#sample{
	position:relative;
	width:600px;
	height:450px;
	border:1px solid #000;
	margin:0 auto;
	}
#inner{
	position:absolute;
	top:150px;
	left:20px;
	width:200px;
	height:250px;
	background:url(hoge.png);
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="hoge.png", sizingMethod="scale");
	color:#fff;
	overflow:auto;
	}	
				
--></style>

<div id="sample">
<p><img src="hoge.jpg" alt="サンプル" /></p>
<div id="inner">
<p>ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。</p>
</div>
</div>

まず適当にダミーテキストを入れてFxで確認。問題ない。IE6.7、めずらしく問題ない。ただ普通にbackgroundとfilterの部分で2重に透過PNGが重なってるからIE7はちょっと背景画像が濃い。でもそこは全体からして大した問題ではないので完全スルー。

>>サンプルページ

でもやっぱり問題発生した

思惑通りと思っていたのにやっぱり最後でIE兄弟に泣かされた。上のサンプルの段階で問題なかったので、次にスクロール関連のチェック。内容量をスクロールする程度に増やして確認した。Fx問題ない。IE6、問題な・・・ウヘッ!

>>IE6.7で「ウヘッ!」ってなるサンプルページ

(n ▼ω▼ ) <スクロールバーが動かないんですけど。

動かぬスクロールバーはただのバー。イラっとしてIE6よりはちょっとだけ優秀なIE7で確認。

(n ▼ω▼ ) <IE7、お前かァァァァ!

なんのために存在してんの。かろうじてマウスをその辺りに持っていってホイールをグリグリしたら動く模様。何なん、これは。誰かたすけて。ちなみにOperaさん、Safariさん、Chromeさんは大丈夫。いい子。

犯人は透過PNG絡みとお見受けした

今までpositionとoverflowを組み合わせてもこんな事になった事はないから怪しいのはfilter。とりあえず上のサンプルからfilterを外したのがこれ。

>>filterを外したサンプルページ

IE6で透過PNGが背景として表示されなくなってるのは当然として、スクロールバー、IE6でも7でも問題ない。動かせる。やっぱり犯人はfilterだった。君なんかに頼った私がバカだったよ。今回初めて実務で使ってやろうと思ったのに・・・ご縁がなかったようだ。

filterを外した事でIE6はアレだけど、IE7では上の行のbackground:url(hoge.png);の指定がちゃんと効いてるから透過PNGも大丈夫。とりあえずfilterがダメならJavascriptがあるさ!と代替を考える。

Javascriptで半透明使えるようにしてみるよー

上でfilter外した時点でIE7はもう問題ないのでここからはIE6との闘い。

まず透過PNGでパっと頭に浮かんだのが前に書いたjQueryのプラグインのpngFix。そのサイトでもjQuery使ってるからちょうどいいやー的な発想で。

jquery.pngFix.jsを使ったケース

>>jquery.pngFix.js - PNG transparency for Windows IE 5.5 & 6 (IE PNG Fix)

>>jquery.pngFix.jsを使ったサンプルページ

パっと見た感じの見た目、無問題。スクロールバーにマウスを寄せると・・・
工エエェェ(´д`)ェェエエ工工

(´д`)ってホンマにそんな顔になった。pngFixを使ってもIE6がゆーこと聞いてくれませんでした。マイスホイールグリグリはいけるのにスクロールバーを感知してない。

IE7.jsを使ったケース

IE7でいけるんだからIE6をIE7に近づけてみようとIE7.jsを利用してみる事にした。

>>ie7-js - Google Code

>>IE7.jsを使ったサンプルページ

見た目OK。スクロールバー・・・やっぱりダメ。

もう少し粘ってみようと思ってIE6で透過PNGが使える系のJSはいろいろ試した。無理だった。JSに限らずなんかCSSの方でもいろいろ試した。無理だった。

結論

無理なもんは無理らしい。ということで、IE6を考えるならタイトルの通り、
(n ▼ω▼ ) <透過PNG + overflow = 混ぜるな危険

最後にもう1つ残念なお知らせ & まとめ

上ではpositionの話してるけど、これ、floatで同じ環境にしてみてもスクロールバー動かないんだな、これが。

そもそも根本的にpositionやfloatを使わないとしても透過PNG背景に入れてたら動かないじゃんって最後に気づいた。まさかそこの時点で前提が崩れてるとは・・・positionやfloatがまずいとばっかり思い込んでてスルーしてた。びっくり。

>>一応位置的な指定抜いたfliterバージョンサンプル
>>同じく位置的な指定を抜いたjsバージョンサンプル

つーことで最終的結論は、IE6ではボックス背景に透過PNGを使う場合、overflow:auto;は使えない。マウスホイールがあればかろうじて動くけど、ビミョー。

とりあえず、なんか自信なくした。煮詰まったので今日はこれ以上考えるのやめる。同じ方向しか考えが向いてない。こういうのってハマり出すとドツボにはまっていくし、案外寝て起きたら何か解消される事が多いし、明日の朝になったら特効薬が見つかるといいなぁ。

悲しい事にググっても同じ症状が出てこない。てか透過PNG背景にしてたらIE6でスクロールてきないなんて聞いたことないし。どっか凡ミスしてるのかな。無念なり。

追記 解決しました

コメント欄にてsmilkobutaさんにAlphaImageLoaderではなくAlphaを使うといいよとお教えいただきました。ご丁寧にサンプルまでありがとうございました!で、さっそく手元で試してみました。

>>サンプル08 Alpha版

仕組みとしては今回サンプルとして使っていたfilterでAlphaImageLoaderを利用するのではなく、Alphaを利用して半透明にしたimgを子ボックスの更に背面にレイヤーとしてかぶせて透過効果を実現するという形です。smilkobutaさん作ってくださったサンプルを元に少しだけ変更した点を書いておきますね。

まず、そのままだと他ブラウザで透過効果が得られないので、Alphaで半透明効果を狙う部分のソースを条件付きコメントでIE6のみに適応させるようにする。

<!--[if IE 6]>
<img src="http://redline.hippy.jp/images/081205_04.png" alt="" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);margin-top:150px;margin-left:20px;" />
<![endif]-->

CSS側ではモダンブラウザへは本来の透過PNGが背景として適応されるように子セレクタで指定。

#sample>#inner{
	background:url(http://redline.hippy.jp/images/081205_02.png);
	}

これでIE6の場合のみ別な処理をしてその他ブラウザには仕様に添った形で意図した見た目を提供できる、と。ほんとにありがとうございました!

正規版IE6では何も問題ないそうです。お騒がせしてすいません!

余談なんですが、最近こうやってブログに書いてコメント等で教えて頂くケースが非常に多く、毎回メタルキング級の経験値稼がせていただいてます。本当に感謝してます。いろいろ教えてくださった方々、ありがとうございました。同時になんかいつも申し訳ないなぁとか思ったりもするんですが、なるべく人の役に立てそうな話を書けたらいいなーと思ってますので・・・来年度もこのブログを何卒宜しくお願いしますです。(別に年内はもう記事書かないって決めてるわけではないんですが、なんとなくそんな事を言う季節なので。1年が経つのは早いもんですなぁ。しみじみ)

<< display:table関連を使って横並び均一配置 | OLリスト 番号だけ画像なしでスタイルを変更 >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/203

コメント (12)

背景透過PNGにするのではなくて、
この画像の場合だったら、もともと後ろの女の子の画像にぼかし&色がかかったjpgを用意して、子ボックスの背景に敷いたらどうでしょう?
ただ、後ろの画像が変わるたびにこの背景画像もつくらねばなりませんが・・・。

>Takazudoさん、コメントありがとうございますー。

そうなんですよね。仰るとおり、ここ女の子写真を背景として扱えるなら何も問題ないというか、なんとでもなるんですよね。ただ今回の場合、ここの女の子写真が1種類じゃなくて単位は百超える上にその画像用意する(予め土台としてぼかし部分入れるとしてもその加工含めて)のが私自身ではないとか、その他モロモロのクライアントの希望等の諸事情があってimgで・・・ってことなんですよ><
背景画像が数種類ならまだ我慢できるんですが、今後も増え続けるらしいので何か別の手考えないとなぁといった所です。唯一の救いはこの女の子の上に乗せる半透明ボックスがホントはいくつかあるんですが、スクロールする可能性があるボックスが1つだけな事くらいですね・・・。
最悪の場合、IE6では透過PNGを使わずに背景入れて内容をスクロールさせる、その他ブラウザはハックで透過PNGを使用するという形が一番安全なんじゃないかなと今は思ってます。

あ。あと独立おめでとうございます。がんばってください(n'∀')η

オリジナルIE6が無いのでIETesterでテストしていますが、同じ症状がでました。

対応方法を考えてみたのですが、AlphaImageLoaderではなくAlphaを使うのはいかがでしょうか。

↓サンプルページ
http://hello.lumiere-couleur.com/code/transpng_overflow/sample.html

透過ではない画像(ここではJPGにしています)をスクロールボックスの後ろに配置しているだけですが、うまいこと動いているようです。

サンプルではimgタグを使っていますが、background画像+Alphaでもいけるかもしれないですね。

>smilkobutaさん、ありがとうございました!!!!
さっそく記事内でも追記しました(n'∀')η
background画像+Alphaにするとボックス内のテキストなんかも半透明になるんじゃないかなと思ってまだ試してないんですが後で試してみますー。

ほんとにありがとうございますです!

やっぱりオリジナルIE6では問題なかったんですね。
IEならありうるバグかと思ったら・・・

私もしょっちゅういろんなブログや掲示板に頼っていますので、たまにお役に立てるとうれしいです(^^
まあ、すっきりはしましたよねー

>Redさん
なるほど~。
しかしスタンドアロン版のIEだとそんな問題もあるんですね。cookie効かない。怪しい…。印刷できない…。ぐらいに思っていました。

>がんばってください
がんばります!ありがとございます!

>smilkobutaさん
ほんとにすいませんすいません><
わざわざサンプルまで作っていただいたのにこんなオチになってしまって・・・。
スッキリはしたんですが、他の方を巻き込んでしまって申し訳ないやら恥ずかしいやら・・・です(n'ω' `)
でもホントにありがとうございました。

>Takazudoさん
ほんとスタンドアローンにしてやられたーーて感じです。ご心配おかけしました><
てかちゃんと正規版のIE6で確認してから記事書けばよかったと激しく後悔中です。。。どうりでググっても同じ症状出てこないわけだ(汗)
いろいろありがとうございましたー。


どもです、いつも勉強させてもらってマス。
ほんと、AlphaImageLoaderって、使えそうで使えないフィルタですよね・・。

IE6なんて消えてなくなればいいのに。(取り消し線が使えないのが悔しい)

これとは関係ないかもしれませんが、
背景にAlphaImageLoaderを使うと、その子要素のリンクが反応しなくなる、ってのもありますよね。

それには、aタグにposition:relativeを追加すると解決するみたいですが。

「はやくIE6は無視してもいい」ってコメントかけるようになりたいなぁ(;´Д`)

>えどさん、こんにちわーです。
>「はやくIE6は無視してもいい」
ですねーw
でも最近IE6だけ表示が他と違ってても結構スルーしたりする事も増えました。「別にIE6だけ少し違ってても死にはしない」くらいの気持ちで(n' ω 'n)
position:relativeって結構便利ですよね。私も何かあったらまずposition:relative入れてみるタイプです。まぁしかしIE6のシェア、なかなか下がらないですね。ここのブログなんかはやっぱり見る方はweb屋さんが多いと思うのでFxが多いけどクライアントのサイトはやっぱりIE6もまだまだ健在っす。悲しい現実・・・。

Redさん初めまして、jQueryやCSS絡みでいつもこのブログを拝見、刺激をいただきながら勉強させていただいてます。(初めての書き込みで緊張しています)

実は全く同じような仕様のサイト案件(プレオープン告知サイト)が秋ごろありまして、全く同じ問題に当たりました(^^;

CSSやjsをチェックして、問題の把握までは行ったのですが、結局Redさんの案件ほど背景に配置する画像枚数が無かったので、背景画像の加工で対応しました。(スクロールバーがIEで動かなかったときは背筋が凍りました、、、)

ついでにその画像をここで紹介されていたcycle-pluginを使って動かしたりも。
(何故か画像を動かす時、画像に付けたドロップシャドウの部分がIE7のみ汚くというか、変というか壊れた感じ?に表示されてしまったので、背景が白以外であったり、透過したボケ足の時は対策しないとダメかも知れません)

デザイナーからマークアップやらXHTMLやらCSSやらjs勉強中なので未熟ですが、これからもお邪魔させていただければと思っています。

>Dancing Cloudさん、はじめまして。
コメントありがとうございましたー。
少しでもお役に立ててよかったです。こちらこそこれからもよろしくお願いしますです(n'∀')η
私もまだまだ勉強中で未熟さ満開なんですが、来年も頑張ります~。

似たようなことをやろうとしてハマりました。
ブログでは正規版IE6なら問題ないとのことでしたが、こちらでは正規版でもダメでした…orz

スクロール領域内のコンテンツ画像自体に透過png使いたかったのですがもう手がないかも…です。




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。