CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成!

28

05月2010年

IE6でも透過PNGを使う

sakai 17:48 PM

イメージ

いまだ小沢健二コンサートの余韻が冷めない sakai です。

普段は透過 PNG を使わずにデザイン・コーディングをしているのですが、先日どうしても透過 PNG を使いたいシーンがありました。
透過 PNG は大変便利ですが、IE6 が対応していないのがネックです。

というわけで、IE6 でも透過 PNG を使用できるようになる JavaScript のライブラリを色々試してみました。(今さらですが!)

有名どころの「jquery.pngFix.js」から使ってみましたが、これは背景画像に透過 PNG を使うとちゃんと表示されなくて断念。
IE7.js」もところどころ挙動が怪しいしなあ… と困ったりしつつ、最終的には「DD_belatedPNG.js」に行き着きました。

透過 PNG を背景画像に指定したり、ポジションをいじったりしても挙動が安定しているのでとっても良かったです。

参考にさせていただいたサイト(ありがとうございました!)

バシャログスタッフによるWebサイト制作サービス

トラックバック

このエントリーのトラックバックURL
http://c-brains.jp/cgi-bin/mt/###/2256
###はmt-tb.cgiに変更してください。

コメント

htmlがうまく表示されないので、再度投稿しました。


いまだ小沢健二コンサートの余韻が冷めない sakaiさんこんにちは。

DD_belatedPNG.js使わせてもらいました。リピートができてすごくうれしかったのですが、ひとつ問題が。

角丸の背景に使ったのですが、

<div id="content" class="png">
<div id="content_inner" class="png">
<div id="content_inner_body" class="png">
<p>あああああ</p>
<div>
<div>
<div>

#content {
float: right;
width: 722px;
background-image: url(../images/main_top.png);
background-repeat: no-repeat;
background-position: left top;
padding-top: 30px;
display: inline;
}
#content #content_inner {
background-image: url(../images/main_bottom.png);
background-repeat: no-repeat;
background-position: left bottom;
padding-bottom: 30px;
}
#content #content_inner_body {
background-image: url(../images/main_body.png);
background-repeat: repeat-y;
background-position: left top;
padding-top: 30px;
padding-bottom: 30px;
}

こんな感じでie6で見てみると、真ん中のリピート画像
<div id="content_inner_body" class="png">)と下の画像(<div id="content_inner" class="png">
)の間に1px位の隙間ができ、困っています。


画像をgifにすると治ります。

中身の

<p>あああああ</p>

を増やすと治ったりしました。

どう調べてもわかりません。助けてください。


こちらでも同じように困ったひとがいました。

http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=1378

もしよろしければアドバイスいただけますでしょうか。

お願い致します。

>にしうらさん
コメントありがとうございます。小沢健二コンサートの余韻に浸りつつ、出張続きでコメントの返信が遅くなってすみませんでした、の sakai です。

ご指摘の現象が再現する環境で検証してみたいと思いますが、どちらかに該当のページをアップしていただくことは可能ですか?

よろしくお願いいたします!

追伸:コメントが重複しておりましたので、最新の日付を残して削除させていただきました。

出張続きのカリスマwebクリエーターのsakaiさん、こんに
ちは!

返信ありがとうございます。お忙しいとこすいません。

http://nisiura.jp/space

こちらのサイトを練習で作成中なのですが、右カラムと

左カラムの枠(角丸)に透過pngを背景に使ってます。

divを3つに分けて縦に可変するようにしております。

(この使い方が間違っているのでしょうか?)


問題は、左のカラムは問題なく表示されるのに、右のカラム

だけおかしくなるのです。IE6だけです。

右のカラムの下のpng画像と、中のリピートpng画像の間に

1px位の隙間が出来てしまいます。オーマイゴッド!!

左はうまくいってんのになぜ右だけ??

すいませんが宜しくお願い致します。


>にしうらさん
サンプルありがとうございます! 出張続きで PASMO のチャージが常に綱渡りの sakai です。

早速、ローカルで色々検証してみたのですが、いやはやなるほど! これはちょい手強いですね…
引き続き検証してみますので、もう少しお時間をいただけますでしょうか。すみません!

よろしくお願いいたします。

sakaiさん、こんにちは。

検証ありがとうございます。

お忙しいとこほんとすいませんね。

コメントを投稿

ページの先頭へ

POPULAR TAGS
  • バシャログスタッフによるWebサイト制作サービス

ARCHIVE

特集

  • ステップアップ!CakePHP
  • 作って学ぶjQuery