ブラウザの互換性の問題のサプリメント

1.背景原点ブラウザの互換性

ブラウザの互換性の問題や互換性もWebサイトの互換性の問題として知られている、さまざまなブラウザ画面上でページを参照してくださいは、ブラウザとWebページ間の一貫性のない互換性の問題が生じることがあります。単に主要なブラウザメーカーは標準の独自のセットを持っていることを意味し、非標準のブラウザは独自の機能市場セグメンテーションへの声明を発表しました。しかし、また同じカーネルを実行する別のブラウザでは、その各ブラウザは、ブラウザの互換性の問題の主な原因である特定の不一致があるWebページを解析し、これは我々が常にブラウザの互換性の問題を言うことです。

ブラウザ戦争

ブラウザ戦争は、異なるWebブラウザ間の市場競争のシェアを指します。競争の次の二つのセットを参照するために使用:20世紀の最初のグループは、Microsoft Internet Explorerのある、Netscape NavigatorはNetscapeが優位に置き換えられます。第2のグループはInternetExplorerのMozilla Firefoxのは、Google Chrome、Safariやオペラなど、2003年以降浸食され、他のブラウザのシェアでした。

2. CSSハックとは何ですか

ハック、名前が示唆するように変更意味が異なる結果として、解析し、原因異なるベンダーブラウザから異なるバージョンや、CSSのサポート(例えばIE6-IE11、Firefoxの/サファリ/オペラ/クロームなど)いくつかのブラウザには、同じではないですブラウザ環境は、一貫性のない結果を表示するページが表示されます。この時点で、我々は均一な結果ページを取得する必要があり、あなたは異なるまたはブラウザ固有のCSSスタイルのためのさまざまなバージョンを記述する必要が、我々は別のブラウザ/バージョンと呼ばれるCSSハックのためのCSSコードを対応するこの手順を書きます!

原則ハック

異なるブラウザやCSSのサポートと分析結果のブラウザのバージョンは、異なるブラウザは異なるCSSを適用するためのシナリオに私たちを可能にするブラウザに対する効果の影響を実証するための同じ、およびCSSの優先順位ではありませんので。 

欠点ハック

一貫性が使用ハックページのパフォーマンスが、あまりにも多くの虐待のために良いですが、混乱のHTMLドキュメントを引き起こし管理と保守の負担を増加させますが、無駄になることができます。

どのような状況ハックの使用では
通常の状況下で、我々はCSSハックを使用して回避しようと、いくつかのケースでは、アカウントにユーザーエクスペリエンスの下位互換性、最後のハックの使用を取るためです。たとえば、新しいCSS3プロパティの多くは、我々がハックトリックを使用する必要があり、その場合には、IE9 / Firefoxの/ Chromeで適切にレンダリングIE8以下CSS3をサポートしていない、と私たちのプロジェクトページを使用しているため。

3.一般的な問題とその解決方法

質問1:破線ボックスFirefoxブラウザ、表示されたリンクをクリックしてください。 
方法:我々は、ラベルセットのアウトラインのプロパティを与えることができます: 
{概要:なし;} 
A:フォーカス{概要:なし;} 
質問2:Googleのブラウザのフォント最小12ピクセル、フォントセットの表示が12ピクセル12ピクセルよりも唯一の小さい; 
方法:フォントサイズを変更するにはtransformプロパティを使用します

4.CSSスタイルのリセット

上記のWebサイトの互換性の問題は、表示が一致しないことがさまざまなブラウザ上でページを参照してください、このようなIEにインデントULと既定のスタイルなど、さまざまなブラウザのデフォルトのスタイルとの違いがあるだろう、それはですインデントは、Firefoxダウン、それを達成するために、パディングによってインデントされ、マージンによって達成されます。人々はスタイルのリセットにブラウザの互換性から延長し、この状況を助けることができなかった。そう、これはこの問題に直面している、ソリューションはすべて削除、より正確な一部の人々が最初のブラウザのデフォルトスタイルを与えることですラベルスタイルを再定義していると述べました。ブラウザのデフォルトCSSのプロパティをカバーします。上書きブラウザによって提供されるデフォルトのスタイルは、これはスタイルのリセットされます。 
各ブラウザが一貫した基準を持っており、このベンチマークを達成するために最も重要な方法は、すべてのこれらのスタイルをクリアすることであるように、CSSスタイルのCSSスタイルのリセット:スタイル役割をリセットします。

スタイルの欠如をリセット

1.不当地破坏了所有浏览器的基本样式,例如使用*{margin:0;padding:0},去掉ol,ul的列表样式,使得一些语义元素缺乏恰当的样式表现。 
2.粗暴的reset使得一些交互控件外观在浏览器下失调,例如去掉了outline,使得交互控件缺乏视觉反馈。 
3.增加浏览器样式计算成本,有一定的性能负担,因为平白无故的增加了CSS文件的大小,增加了很多的渲染。

各大浏览器使用的内核

IE浏览器:使用trident内核; 
Firefox浏览器:使用gecko内核; 
safari浏览器:使用webkit内核; 
opera浏览器:以前是presto内核,现在改用google chrome的Blink内核; 
Chrome浏览器:使用Blink内核(基于webkit,google与opera software共同开发)

更多技术资讯可关注:gzitcast

おすすめ

転載: blog.51cto.com/14500648/2433725