PNG8 バリ問題の完璧な解決策_html/css_WEB-ITnose

以前、PC で作業する場合の IE6 での PNG8 画像の解決策は次のとおりでした:

PNG を PNG24 として保存し、DD_belatedPNG.js のようなライブラリをプロジェクトに追加して、IE6 で png24 が白く見えるようにします。底は透明です。この方法は非常に完璧だと思われます。まず第一に、後の段階での画像のメンテナンスが容易になり、js ライブラリで簡単に処理できるからです。これで私たちフロントエンド女子の心配は省けますO(∩_∩)O! 2つ目は、サーバーへの負担が大幅に軽減されると言えます。

しかし、今週WeChatスマートライフアクティビティページに取り組んでいたとき、残念なことが起こりました。 DD_belatedPNG.js がフレームワークの js と競合しています (時間が厳しかったので具体的な理由は確認しませんでしたが、フレームワークが完璧ではないと思われます) まず、このイベント ページのフレームワーク、フルスクリーン スライド (マウススクロール切り替えをサポートしています）、ページのコンテンツもシンプルです、結局のところ、それは単なるアクティビティページです(*^__^*)...興味のある友達はクリックしてください(http://action.weixin.qq) .com/payact/readtemplate?t=pc/ 2015/wisdom_life/index_tmpl)

さて、本題に戻りますが、DD_belatedPNG.js をこのプロジェクトに追加した後、png24 は ie6 で透明効果を示さなかっただけでなく、影響を受けました。絶対的な位置関係が残念すぎます(;´⌒`) 予定時間内にオンラインに行くためには、特に心配することはなかったので、その時はあまり心配していませんでした。叔母の図書館を引用するとき、必然的に衝突が起こります。最終的に、講師の指導のもと、IE6 では png8 イメージを使用し、その他のブラウザでは png24 ビット イメージを使用することにしました。

また問題が…昔のpng8は荒いものが多く、個人的にはあまり好きではありませんでした。しかし、インストラクターの指導により、その効果は基本的に他のブラウザと同じになりました。この方法も非常に簡単で、Web フォーマットを保存するときに png8 を選択し、背景色 (または背景色) に近い色でエッジを塗りつぶし、スタイルに移動して対応するパッチを作成するだけです。この方法は本当に完璧です。 、欠点はほとんど見つかりません！最後の写真はie6のエフェクトですO(∩_∩)O はは〜

ie6のエフェクト

Chromeエフェクト

そういえば、ちなみに、しましょうこの出会いについて話す もう一つの質問ですが、これまであまり気にしていませんでした。通常、案件をいただくと、まずプロダクト側やデザイン側とコミュニケーションをとり、デザイン案の分析や枠組みの構築などを行うことになります。枠組みを構築する際には、どのようなページなのかが分かります。到達したタグを初期化して、このタイプのタイトル、h1、h2、h3、h4、h5、h6 は初期化されていますが、パディングとマージンと同様の高さが残っています。このプロジェクトでは、この種の問題を解決する方法があることを知り、本を十分に読まなかった自分自身を責めました。今まで知っていたように、この強力な武器は line-height を 1 に設定することです。 書き方は line-height:1;px を省略して ~(???)/~

です。