発生したブラウザの互換性の問題と解決策（推奨）について

序文：

先週の日曜日、先輩から3ページ作るのを手伝って欲しいと頼まれました。データのやり取りなどはなく、フロントエンドの簡単なページだけでした。長い間何もしていなかったし、本を読むのも飽きていたので、練習がてら引き受けてみました。以前は体系的に本を読んでいなかったので、多くの問題を包括的に考えることができませんでした。事実は知っているが、理由がわからない状態でした。今でも学ぶべきことはたくさんありますが、自分の欠点を知らないよりは知っていたほうがいいですよね？これも進歩だと考えられますか？要するに、私はさまざまな問題に遭遇しましたが、問題は主に 2 つのカテゴリに分類できることがわかりました。1 つ目は、知識が足りないため、解決方法がわからないことです。これらの問題のほとんどは、Baidu に問い合わせるか、専門家に問い合わせることで解決できます。2 つ目は、現在のテクノロジーには確かに抜け穴があり、実装されていないか、実装されていても曖昧さや矛盾があるということです。今回作ったページで遭遇した最大の問題はブラウザの互換性でした。解決策があればここで皆さんと共有したいと思います。他の人の刺激になり、私ももっと学べることを願っています。ありがとうございます。

文章：

1. 発生した問題: 現在のブラウザは IE7 以下です

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

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

2. 問題: IE8 は CSS3 を十分にサポートしていないため、角を丸くすることができません。

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

実装方法：ここでは実装方法については詳しく説明しません。ダウンロードして、パスを「behavior: url(path/PIE.htc);」に変更するとアクセスできます。注意すべき点がいくつかあります。

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

（２）参照が成功した後、角を丸くする必要があるオブジェクトが消えてしまった場合は、心配しないでください。シャワーを浴びれば大丈夫です。私自身もテストしました。

冗談です。シャワーを浴びに行ったのですが、表示されませんでした。コードにバグか何かがあったのでしょう。神に祈っても無駄です（手を広げて）。最初からもう一度調整し、Baiduに行って問題を見つけました。z-index が原因でしたが、z-index のみを設定しても効果はありませんでした。あ～その位置属性はデフォルト値の static にはできないことがわかりました。わかりました。位置を relative に設定すれば大丈夫です。ie8 では完璧な丸い角が実現されます～（ここで、PIE を作成したエンジニアに心から感謝します。本当にあなたの努力のおかげで、私が望む効果を簡単に達成できます、Consan Amidah～）

3. 問題: IE8 は、レスポンシブ レイアウトを実現するために CSS3 の @media screen と (....) をまだサポートできません。

解決策:非常に迷惑な小さなゴブリンなので、他に方法はありません。 （肩をすくめる）画面の幅を取得するために別のjsファイルを作成し、対応するスタイルを追加します

実装方法: HTML内に「<!--[if lt ie9]><script type='text/javascript' src='path'></script> <![endif]-->」と記述し、インポートしたjsファイルに実装します。この時期に私が遭遇したつらい出来事について、皆さんを笑わせるためにお話ししましょう。長い間試してみましたが、理由はわかりませんがうまくいきませんでした。オンラインでさまざまな優れたプログラマーのコードを探し、1つずつ比較してみましたが、それでもうまくいきませんでした。どうしてそんなことが出来ないのでしょうか。これはとても恥ずべきことです。すると、「ie9」と「>」の間に余分なスペースがあったことが原因だと分かりました。

（手動でさようなら）。しかし、バグを直した後の達成感はやはりあります。それがこのためだと分かると、「まずは自分を100回殺してもいい」という気分になります。

js コードは以下に掲載されています。原理は実は非常に単純です。主な理由は、innerWidth と clientWidth の間に若干の違いがあることです。疑問がある場合は、インターネット上で検索すると、専門家による詳細な分析が多数見つかります。

4. 発生した問題: IE11より前のバージョンでは、<img>が<a>タグ内にある場合、奇妙な青い枠線が表示されます。

実装方法:すぐに結果を得るために、<img> に「border:0;」を追加します。

5. 発生した問題: トップページなので、画像をスクロールして書きましたが、IE10 の下の画像には不可解な隙間があります

実装方法: <img> に「display:block;」を追加すると効果抜群

6. 発生した問題:テキストを縦書き表示するために「writing-mode:tb-rl;」を使用しましたが、友人のコンピュータで調整したところ、愛用の FF には影響がありませんでした。これはあり得ないことでしょうか? ? ?その後、このプロパティは FF4 以前には実装されておらず、もともと Internet Explorer によって考案されたものであることがわかりました (正直に言うと、当時は少し驚きました。結局のところ、私の心の中では、Internet Explorer は、独自の小さな発明をするが、それらはすべて破壊的な孤独な天才であるため、このような便利なプロパティは Internet Explorer によって考案され、FF がそれを後になってまで実装しなかったことが判明し、私にとってはかなり驚きでした)

解決策: いいえ、問題がある場合は、解決方法を見つける必要があります。唯一の方法は、ul li 文を 1 つずつネストし、右にフロートして固定幅を設定することです (正直に言うと、writing-mode を使用した後、この方法は愚かであり、効果は良くありません)

実装方法:アイデアについては説明したので、早速コードを見てみましょう。

上記は、互換性を調整するときに遭遇した問題です。以下は、前に述べた 2 種類の問題、つまり、私の能力の限界により遭遇した問題と、解決できない既存の問題です。

1:この問題は、結局のところ「浮遊」という 2 つの言葉に集約されます。 (太字にして下線を付ける必要があります) この div がなぜか後ろに回っているのに、なぜ img が上のナビゲーションのレイアウトに従っているのでしょうか。なぜこの p タグがこんなに無責任なのでしょうか。あなたたちの画像は一番下にありますが、なぜ上の div の p タグに走っているのですか? あなたゲイですか?そうですね、結局は私自身が責任を取らなければならないと認めざるを得ません。なぜなら、フローティングは確かに非常に強力ですが、適切に使用されなければ、非常に奇妙な結果が生じるからです。だから、本を注意深く読んでください。ここでこれらのタブやブラウザを批判するのは無害に思えます。

2: (1) ファイルを非同期で読み込む必要があるため、JQuery のロード方式を使用していますが、Google Chrome では禁止されています。調整する方法はありませんが、サーバーに変更することは可能です。360 でも同様です。

(2) Google ではフォントサイズを 12 ピクセル未満に設定できません。これは Google に長い間存在していたバグです。なぜこれが残されているのかはわかりませんが、おそらく Google はそれがクールだと思っているからでしょうか?ネットで検索して「-webkit-text-adjust:none;」という解決策を見つけましたが、テストできませんでした。Google は、そのようなものは存在しないとして、直接禁止しました。

あとがき:

最後に、個人的な感想を少し述べます。確かに実践を通じて多くの知識を習得できますし、本を読むほど退屈ではありません。しかし、この知識は非常に散在しているため、本を読むなどの体系的な学習は依然として必要です。そのため、今後はこの 2 つを組み合わせて、さらに進歩できるよう最善を尽くします。私もIEについて少し洞察力を持っています。IEは非常に個性的で、ブラウザの実装が特にユニークなため、以前はIEが嫌いで、自分を信じて他人を見下す天才集団なのだろうと思っていました。しかし今では、IEは私にとってはスケープゴートになっていることに気づきました。IE自体はフロントエンドの実装について多くのアイデアを持っており、細かいことを非常にうまくやっています。フロントエンド技術の開発についても非常に先進的です。だから、私が以前IEを叱り続けたのは、おそらく私の無知によるものでしょう。結局のところ、天才であるということは、それが天才であるという事実を強調するために、常に普通の人とは異なる気質を持っているということです。もう理由もなく叱ることはしませんが、将来いつか、私たちの愛するフロントエンド プログラマーをこのように苦しめることがなくなることを心から願っています :-)

ブラウザの互換性に関する問題とその解決策（推奨）に関する上記の記事は、編集者が皆さんと共有する内容のすべてです。参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。