iepngfix.jsでPNGを透過させたいがIE6/7で表示が不正
サイト内に透過PNGを何点か使用したく、かつIE6に対応する必要があるため、上記「iepngfix.js」を導入しました。
divボックスの背景に敷いたPNG画像は無事に透過されましたが、そのボックスの中にimgタグで配置したリンクボタンの表示が一部不正です。
具体的には、IE6および7にて添付画像のような状態になります。8および他のブラウザは問題ないようです。
マークアップ設定としては、divのcontentsボックスに透過PNGの背景を指定、その中にリストボタンを並べるためのcontents_headlistボックスを配置、その中にaタグでリンクを設定した透過PNGボタンを配置しています。
関連部分のおおまかな設定は以下のとおりです。
body:全面にgif画像(透過なし)を敷き詰め
.contents:幅と高さを指定、透過pngをno-repeatで配置、「behavior: expression(IEPNGFIX.fix(this));」「overflow:hidden;」を付加
.contents_headlist:contentsボックス内に配置、幅と高さを指定、左にフロート、パディング指定、「behavior: expression(IEPNGFIX.fix(this));」付加
.contents_headlist内に設置したimg:幅と高さを指定、alt属性指定、リンク付加、「style="behavior: expression(IEPNGFIX.fix(this));」付加
IE6の表示でも、透過部分のグレー表示が見られないので透過自体はされていると思います。
できればiepngfix.jsを使用したままなんとかしたいのですが、iepngfix.js自体のバグか何かならば乗り換えもやむなしと考えています。
不明点等あれば追記しますので、よろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
こちらではないでしょうか。
http://terakoyan.x0.com/?p=86
ここにあるように透過GIFをご自身のサーバーに用意する方が確実ですよ。
参考URL:http://terakoyan.x0.com/?p=86
この回答への補足
ありがとうございます! まさにこれじゃないかと思います。
配布元のサーバーのせいとは思いませんでした・・・
今は素材が手元にないので、挙動は明日確認してみますが、ひとまずお礼を。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS 角丸画像の背景色を透明にしたいです 1 2023/06/23 23:15
- 画像編集・動画編集・音楽編集 画質を落とさず切り取って透過したいです 2 2022/06/08 12:28
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- Photoshop(フォトショップ) フォトショップで背景をくり抜く方法 2 2022/05/14 12:39
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
【Webサイト】画像が小さく表示...
-
スクロールすると追従する画像...
-
大至急。webのシングルページを...
-
CSSでサイトの背景に画像を組み...
-
要素の幅をいろんな写真の幅に...
-
gif画像でたまに背景がグレーに...
-
background-sizeの背景で最小値...
-
背景が透明な画像をwebサイトに...
-
htmlかcssで背景の白い枠をなく...
-
画像横の余白をなくしたいんで...
-
背景固定、文字がスクロールす...
-
画像上に文字を表示するとiPhon...
-
背景画像をリンクにする?
-
CSSで複数の背景画像を実装する...
-
ワードプレスで事前定義されたc...
-
同じ画像 複数回使用
-
画像の上にテキスト配置で、拡...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
画像を複数横に並べ、かつそれ...
-
コーディング中、右側に謎の余...
-
同じ画像 複数回使用
-
background-sizeの背景で最小値...
-
htmlかcssで背景の白い枠をなく...
-
lightbox2で画像を天地左右中央...
-
HP作成 作成した画像を動画の上...
-
要素の幅をいろんな写真の幅に...
-
iframe内をクリックさせない方...
-
background-sizeでcontainする...
-
画像上に文字を表示するとiPhon...
-
IMGタグで画像の繰り返し使用は…
-
疑似要素で背景画像に指定したS...
-
スクロールすると追従する画像...
-
HTMLで使う「見出し」は英文で...
おすすめ情報