発生したブラウザ互換性の問題とその対処方法

序文:

先週の日曜日に先輩から3ページ作るのを手伝ってほしいと頼まれ、データのやり取りなどはなく、ずっと何も作っていなかったのですが、簡単なフロントエンドページでした。読むのに疲れたので、練習だと思って引き受けました。これまで体系的に本を読んだことがなかったので、実際には多くの問題を包括的に検討することができず、何が起こっているのかはわかっているが、なぜそうなっているのかはわからないという状態でした。学ぶべきことはまだたくさんありますが、自分の欠点を知っていることは良いことです。知らないよりはいいですよね？そして、これは進歩とみなされるのでしょうか?つまり、さまざまな問題に遭遇したとき、その問題は主に 2 つのカテゴリーに分けられることがわかります。 1 つ目は、自分のことを十分に理解していないため、解決方法がわからないことです。 Du Niang またはマスターに尋ねる; 2: 現在のテクノロジーに抜け穴があるものは、まだ実装されていないか、実装されたが曖昧さや矛盾があるかに関係なく、このリストに含まれます。今回作成したページに関して、私が遭遇した最大の問題はブラウザの互換性でした。解決策があればここで共有したいと思います。また、より多くの知識を得ることができれば幸いです。

テキスト:

1. 問題が発生しました: 現在のブラウザは ie7 以前です

解決策: ユーザーが通常のページに表示されるコンテンツを見られないように、div で覆います

実装方法: 通常コンテンツを表示する div の表示属性を none に設定し、カバーする div の表示属性を block に設定します (追記: ブラウザのダウンロード リンクを追加して、ユーザーがページを閲覧できるようにすることもできます)通常はできるだけ早く)

2. 問題が発生しました:ie8 は css3 を十分にサポートしていないため、ie8 では角丸を実装できません

解決策: PIE をダウンロードして、IE8 が CSS3 の角丸をサポートするようにします

実装方法: 実装方法についてはここでは詳しく説明しません。それをダウンロードして、「behavior: url(path/PIE.htc);」にアクセスするようにパスを変更します。注意が必要な点:

(1) この参照は HTML ファイルに配置する必要があり、パスは参照先の HTML ファイルに対する相対パスです。CSS ファイルに配置しても効果はありません。

(2) 参照が成功した後、角を丸くする必要があるオブジェクトが消えていることがわかったら、四角くならないで、シャワーを浴びて出て、個人テスト

冗談ですが、シャワーを浴びたのですが表示されなかったので、神に祈っても無駄でした（両手を広げて） に行きました。 Baidu をもう一度調べてみると、問題は z-index にありましたが、z-index を 1 つだけ設定しても効果がないことがわかりました。これはデフォルト値です。 IE8で完璧な角丸が実現しました～（PIEを書いてくださったエンジニアの方々に心より感謝申し上げます。カンサンさん、私が望んでいた効果をこれほど簡単に実現できたのは本当にあなたの努力のおかげです）アミダ〜)

3. 問題が発生しました: まだ IE8 なので、CSS3 で @media screen と (....) をサポートしてレスポンシブ レイアウトを実装できません

解決策: まさか、迷惑な小さなゴブリンにしたのは誰ですか? (肩をすくめ) 画面の幅を取得するために別の js ファイルを作成し、対応するスタイルを個別に追加します

実装方法: "