私はWebページ制作のスキルがある程度あるので、半透明のPNGファイルはIE6では表示に問題があると昔から聞いていたのですが、自分でWebサイトを持ったことがないので実際に遭遇したことがありませんでした。
今年の初めから自分のウェブサイトを作り始めました。ウェブサイトのロゴを作成するために、透過部分のある PNG 画像を使用しました。十分に古いものなので、IE6 を考慮する必要はないと思いました。ある日、仕事から帰ってきて Google Analytics バックエンドを開いたとき、IE6 のアクセスが実際に総アクセス数の 40% を占めていることに気づき、ショックを受けて、Web サイトをテストするためにすぐに IE6 の緑色のバージョンをインターネットからダウンロードしました。予想通り、ロゴは完全に不透明でした。
そこで、解決策を一晩中オンラインで検索しました。一般的に、オンラインの方法は CSS フィルター、JS、GIF の置換などを含め、比較的複雑です。しかし、それは十分に美しくないと常に感じていました。一晩かけて探した結果、2 文の JS コードだけで問題をスムーズに解決できる方法を見つけました。次にそれを共有しましょう
まず、私のウェブサイトから iepng.js をダウンロードします。
http://www. *** .com/templates/default/js/iepng.js
半透明の PNG を背景として使用する Web サイトの要素 ID がロゴの場合、<head></head> の間に次の内容を追加します。
| <!-- IE6 PNG 修正用 --> <script type="text/javascript" src="templates/js/iepng.js"></script> <script type=text/javascript> EvPNG.fix('#logo');</script> |
最後に、div ID foo の背景として透明な png を使用する場合は、次のように記述する必要があることを説明します。
| EvPNG.fix('#foo'); |
bar の div クラスの背景として透明な png を使用する場合は、次のように記述する必要があります。
| EvPNG.fix('.bar"); |
構文は CSS と同じです。今後も Web サイト構築のスキルを交換していきたいと思います。
この記事は、Tianniu.com (www.hers99.com) のウェブマスター、Wang Zai によって作成されたものです。転載する場合は出典を明記してください。