ホームページ >ウェブフロントエンド >htmlチュートリアル >主要な Web サイトがさまざまなバージョンの IE の互換性の問題をどのように解決しているか (タイトルが少し大きいです)_html/css_WEB-ITnose

主要な Web サイトがさまざまなバージョンの IE の互換性の問題をどのように解決しているか (タイトルが少し大きいです)_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:16:101171ブラウズ

IE6からIE10ではCSSの解釈が大きく変わりました。ただし、主要な Web サイトはすべて完全な互換性を実現しています (IE 以外のブラウザ自体には問題ありません)。より一般的な解決策は何でしょうか?この側面に関する統一された計画やチュートリアルはありますか?
ヒーローの皆さん、ありがとう。


ディスカッションへの返信 (解決策)

CSS ドキュメントには、このスタイルをサポートしていないブラウザが説明されています
IE6 のスタイルはここにあります

このスタイルをサポートしていないブラウザについては CSS ドキュメントで説明しています


ie6 のスタイルを配置しますここのスタイル
上記の状況はわかっていますが、これは小さなページ用です。大規模な Web サイトの場合、この方法は部分的にしか使用できません。そうでない場合、タオバオは ie6 から ie9、次に ff、そして gc に移行するだけで終わりです。
もちろん、この方法も必要ですが、完全な情報はどこで入手できますか?
ありがとうございます。

互換性の前提条件は、CSS コードが非常に標準化されている必要があることです。以前に書いたコードと同様に、ブラウザがなければ別になります。判断などは非常に面倒ですが、現在はほとんどの問題がありません。コードは標準的な方法で書くのであれば、あまり問題はありません。 _width を使用することもできますし、一部の部分についてはこのようにすることもできます。いずれにせよ、互換性のある書き方を見つける必要があると思います。 CSS は多くの問題を解決するはずです。

わぁ、二階のお兄さんは午前2時半なのにまだ起きてますか~~~~~

まあ、ブラウザの互換性って、marginとpaddingとpng画像くらいだと思います~~~

ウェブサイトが大きい場合は、コードを 1 画面書いて各ブラウザをデバッグするだけです。そうでない場合は、書き終わるまで待ってから確認して変更を加えるのは非常に面倒です。

1画面書いて1画面確認するのが一般的ですが、あまり問題はありません~~
対応ブラウザに問題がある場合は、そのブラウザ用に別のスタイルを書けば大丈夫です~~~
ふふ
o(∩ _∩)o~


互換性の前提として、CSS コードが非常に標準化されている必要があります。以前に書いたコードと同様に、ブラウザーがないと判断が非常に面倒です。でも、今は非常に面倒です。標準化された方法でコードを記述する場合は、この部分に _width を使用することはあまり問題ありません。

4階はそうです、そうなんでしょうね。では、この種の標準に関する標準化されたチュートリアルはありますか?たとえば、どのような状況でパディングをマージンと一緒に使用すべきでないかを考えます。

実際、率直に言って、CSS には非常に多くの機能があり、数え切れないほどの用途がありますが、完全に互換性を保つためには、一部の機能をカットする必要があります。では、カットされた部分についてのチュートリアルやチュートリアルを作成したのは誰でしょうか。ありがとうございます

まず、ページのスタイルをリセットします。例: *{margin:0;pading:0}...

次に、比較的標準的なブラウザ (ff、chrome) に従ってスタイルを記述します


最後に、Zhong残りはブラウザが処理します (つまり、safari、opera)

問題の主な理由は次のとおりです:
異なるボックス モデルの解析 (幅: 100% など、その後フィラーが与えられる)

フィラーのマージ (主に margin -top、margin-bottom)

Floating (とにかく、特別な必要はありません。私は常に overflow:hidden; を使用しますが、初心者はこれのせいでいくつかのバグに混乱することがよくあります。 :after ; *html .clear の方が良い)

各ブラウザの非人道的なバグ (後期は経験に依存、初期は baidu と google)



まず、ページのスタイルをリセットします。 *{margin:0;pading: 0} ...

次に、比較的標準的なブラウザ (ff、chrome) に合わせてスタイルを記述します


最後に、他のブラウザ (つまり、safari、opera) 用の処理を行います

問題の主な理由は次のとおりではありません:
ボックス モデルの解析が異なる (たとえば、幅: 100%; その後パディングが指定される)

パディングのマージ (主に margin-top、margin-bottom)

浮いてる…

まずは、 では、最後に?この記事を開設する目的は、実際に使える内容を整理することです。省略記号は知っていますが、私が欲しいのは省略記号ではなく、N 個以上あるということです。完全に整理されたものではなくても、大丈夫です。

8階にはまだ感謝しなければなりません!

実際のところ、CSS には非常に多くの機能があり、無数の用途がありますが、完全に互換性を保つためには、一部の機能をカットする必要があります。それで、カットされた部分に関するチュートリアルまたはチュートリアルを持っている人はいますか?ありがとうございます
投稿者は怠け者ですので、一時的に労力を節約できるだけですが、一度問題が発生すると、やはり呆然とすることになります
なので、最も役立つのは、他の人が N ページを整理することです。
あなたは「いくつかの機能を削減したい」と言いましたが、それはまったく逆です(怠惰のもう一つの考え方、怠惰があなたの問題全体です)。
互換性を保つためには、1 つの機能について、可能な限り多くのことを学ぶ必要があります。場合によっては、CSS で数倍の内容を記述する必要があります。
合意されたルールやコード スニペットがあるかどうかについては、それは不可能です。 JS は柔軟性があると言われていますが、CSS は完全に自分のページのデザインに基づいています。他のユーザーと同じインターフェイスを使用したい場合は、そのインターフェイスを直接使用してください。 CSS と HTML の構造、そしてテキストの内容のみを変更します

12 階は正しいです。私は怠惰であるという考えを持っていますが、怠惰ではないという考えは次のとおりです。内容は CSS を整理することを意味するものではありません。むしろ、これは完全に互換性のある CSS の使用法をまとめたものです。
例: 既存のものは、さまざまなブラウザーでの特定の属性の説明にすぎず、ほぼすべての属性の例が示されています。この本の利点は、辞書のような参考書であることです。英語辞書を持っているだけでは本当の英語を学ぶことはできません。
私が欲しいのは、完全に互換性のある CSS の書き方に関するチュートリアルです。これは、少しずつ要約することで確かに実現可能ですが、完全な互換性を学びたい学生には、このようなチュートリアルが必要になると思います。このチュートリアルでは、互換性のないコンテンツをすべて要約し、完全に互換性のあるものを構築する方法を説明します。 Webサイト。
実際、多くの人が最初に Web サイトを構築するときに互換性のない間違いを犯していると思います。この領域に関するガイダンスやチュートリアルがないため、最終的な Web サイトを構築した後、互換性のない部分を 1 つずつ修正するのは簡単ではありません。ただし、理由はわかりません (つまり、属性の追加、属性の減算など、たまたま互換性があるためです)。
ですから、このようなチュートリアルがあれば、たとえこの本を買う必要があるとしても、私は迷わず購入すると思います。

補足:
例: 視覚的には、padding と margin は同じ効果を持ちますが、その親要素、子要素、または隣接する要素の特定の属性 (display:fixed など) が必要になる場合があります。ブラウザの互換性の問題を引き起こします。では、全体計画はどうやって立てるのか、全体計画の理論的根拠は何なのか。
完全に互換性のある主要な Web サイトの CSS をご覧ください。これは、この概要とともに、これらの CSS がその役割を果たすためには、特定の CSS 機能を破棄する必要があります。一部の CSS 関数は、使用されている限り完全な互換性がありません)。私が欲しいのはこの概要プロセス、またはチュートリアルです。誰か助けてくれませんか?その CSS をダウンロードしても、この CSS を使用して Web サイトを計画する方法がわからないため、役に立ちません。

はい、最初にページを書き始めたときは互換性が非常に悪かったので、その後、品質が向上したと思います。 IE6 問題があるとしたら、ページに仕様が書かれていないことだと思います。IE6 は非常にめんどくさいですが、エラー検出能力は非常に高いので、間違いはありません。仕様は非常に重要です。

完全に互換性を持たせることは不可能であり、特定の問題は属性に基づいて決定する必要があります。

計画は変化に追いつけないことがよくあります。現実的になり、一度に一歩ずつ進めてください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。