今回は、CSS3 ブラウザーの互換性の問題について説明します。実際のケースを見てみましょう。
この記事では、CSS3 とページ レイアウトの学習 - ブラウザの互換性とフロントエンドのパフォーマンスの最適化の概要を次のように紹介します:
1. ブラウザの互換性
1.1、概要
世界中に同じブラウザはありません。 、同じコードが異なるブラウザーで実行される場合、互換性の問題が発生します。ブラウザが異なれば、同じカーネルでもバージョンが異なります。また、同じバージョンのカーネル ブラウザでも、さまざまなオペレーティング プラットフォーム、さまざまな画面解像度、さまざまな比率が異なります。互換性では主に 3 つの側面が考慮されます:
1)、CSS 互換性
2)、JavaScript 互換性
3)、HTML 互換性
これら 3 つのカテゴリはフロントエンドの主要コンポーネントでもあり、それらはすべて特定の互換性の問題を抱えています。自分自身と敵を知り、あらゆる戦いに勝つために、まずブラウザのエンジン、つまりカーネルを理解しましょう。
私たちは何年もの間、IE6 の互換性について心配し、そのために苦労してきました。IE6 を離れることを楽しみにしていたのに、今では IE8 の互換性が限界を迎えているようです...
1.2、ブラウザ カーネル
Trident
Microsoft 社のブラウザ カーネル、IE6、IE7、IE8 (Trident 4.0)、IE9 (Trident 5.0)、IE10 (Trident 6.0) および多くのブランドのブラウザのカーネル。これらのブラウザの一部の新しいバージョンは、「デュアルコア」または「マルチコア」であり、1 つのコアが Trident で、その後に別のコアが追加されています。
Gecko
Firefoxカーネル、Netscape 6、その後のMozilla FireFox (Firefoxブラウザ)、Mozilla Firefox、Mozilla SeaMonkey、waterfox (Firefoxの64ビットオープンソースバージョン)、Iceweasel、Epiphany (初期バージョン)で採用されたカーネル, Flock (初期バージョン) と K-Meleon で使用されるカーネル。
Presto
以前の Opera カーネルは廃止され、現在は Google Chrome の Blink カーネルに切り替わりました。
Webkit
Safari カーネル、Chrome カーネル プロトタイプ、オープン ソース、これは Apple 独自のカーネルであり、Apple の Safari ブラウザで使用されるカーネルです。 Maxthon Browser 3、Apple Safari、(Win/Mac/iPhone/iPad)、Symbian モバイル ブラウザ、Android のデフォルト ブラウザ
Blink
Blink は、Google と Opera Software によって開発されたブラウザ レイアウト エンジンであり、Google このレンダリング エンジンは計画されていますこのレンダリング エンジンは、オープン ソース エンジン WebKit の WebCore コンポーネントのブランチであり、Chrome (バージョン 28 以降) および Opera (バージョン 15 以降) で利用できます。
edge
Microsoft のエンジンは新しい IE 用に特別に構築されており、高速です。IE11 は現在このコアを使用しています。Microsoft の新しいブラウザは引き続きこのコアを使用すると推定されています。将来。
1.3. ブラウザの市場シェア
ブラウザの市場シェアを超えることができれば、ブラウザの互換性を扱う際に市場シェアの高いブラウザにもっと注意を払うことができ、必要に応じて市場シェアを放棄することができます。小さなフットプリント。
国際:
お問い合わせアドレス: https://www.netmarketshare.com
2016年12月のPCブラウザデータ
2016年12月のタブレット+モバイルデータ
2016年の年間ブラウザシェア変更点
国内:
お問い合わせアドレス: http://tongji.baidu.com/data/browser
上の図からわかるように、PC Web 向けに開発する場合は Chrome ブラウザと IE ブラウザに焦点を当てる必要があり、モバイル プロジェクトを開発する場合は Chrome ブラウザと Safari に焦点を当てる必要があります。
1.4、一般標準と互換性あり
1)、さまざまな主流ブラウザ上で一貫したパフォーマンス
2)、さまざまな画面サイズに適応可能
3)、さまざまな解像度と色に適応可能互換性オンライン テスト:
http://browsershots.org/
http://browsershots.org/
IE テストをインストールできます: IETester をローカルでテストします。
各ブラウザにはデフォルトのスタイルシート、つまりユーザーエージェントスタイルシートのセットがあり、Web ページに指定されたスタイルがない場合、ブラウザの構築に従ってレンダリングされます。 -スタイルシート内。これは当然のことですが、Word にはレイアウトをより美しくすっきりさせるための予約スタイルもいくつかあります。デフォルトのスタイルはブラウザごとに異なり、同じブラウザのバージョンによっても異なります。ただし、これには多くの互換性の問題が発生します。CSSReset はすべてのブラウザのデフォルト スタイルを同じに設定する可能性があります。
たとえば、グローバルリセット *{padding:0; margin:0; border:} は完全にリセットできますが、パフォーマンスが低いため推奨されません。 * は DOM ツリー全体を走査する必要があるため、ページ ノードが多数ある場合、ページのレンダリング パフォーマンスに影響します。この Web サイト http://cssreset.com/ には、参考用の最新の CSSReset があります。
Normalize (CSS リセットの代替手段であると主張され、一部の組み込みスタイルを保持し、すべてをクリアするわけではありません)
http://nicolasgallagher.com/about-normalize-css/
https://github .com/necolas/normalize.css
例: 第 2 章の内容を参照してください
1.6、CSS ハックCSS ハックとは、サーバーの閲覧を可能にするために、さまざまなブラウザーまたはブラウザーのさまざまなバージョン用に特定の CSS スタイルを記述することです。互換性のあるプロセス。
1.6.1. 条件付きコメントの方法IEの条件付きコメント(条件付きコメント)はIEブラウザのプライベートコードであり、他のブラウザではコメントとみなされます。
gt: より大きい、条件付きバージョンを除く、条件付きバージョンより上のバージョンを選択します>
lt: より小さい、条件付きバージョンを除く、条件付きバージョンより下のバージョンを選択します
gte: 以上、選択条件付きバージョン 条件付きバージョンを含む上記のバージョン>=
lte: 以下、条件付きバージョンを選択します 条件付きバージョンを含む次のバージョン
!: 高さに関係なく、条件付きバージョンを除くすべてのバージョンを選択しますまたは低
*IE ブラウザのみ条件付きコメントを認識します。他のブラウザはスキップします
例:
nbsp;html>
<meta>
<title></title>
<!--[if gt IE 6]>
<style>
body{
background:lightblue;
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<script type="text/javascript">
alert("您的浏览器Out了，请下载更新。");
</script>
<![endif]-->
<!--[if gt IE 6]>
<h2 id="大于IE-版本的浏览器">大于IE6版本的浏览器</h2>
<![endif]-->
効果:
IE8
chrome
ie6
属性名の前または CSS スタイルの値の後に特殊文字を追加して、さまざまなブラウザーで解析できるようにします。
http://browserhacks.com/ オンライン クエリ。これは、さまざまな対象を絞った互換性方法を提供する強力な Web サイトで、非常に実用的です。
“-″下划线是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
这里以IE6双边距问题为例。
代码：
nbsp;html>
<meta>
<title></title>
<style>
#p1{
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin-left: 100px;
_margin-left: 50px;
}
</style>
<p></p>
效果：
1.6.3、选择器前缀法
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
《hack速查表》：
nbsp;html>
<meta>
<title>hack速查表</title>
<style>
/*reset*/
* {
margin: 0;
padding: 0;
}
body {
font: normal 12px/2 Tahoma, Arial, "\5b8b\4f53", Helvetica, sans-serif;
height: 100%;
text-align: center;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table {
border-collapse: collapse;
border-spacing: 0;
}
ul,
ol {
list-style: none;
}
em {
font-style: normal;
color: #f00;
}
h1 {
font-size: 2em;
font-weight: 700;
}
.hack {
width: 1000px;
margin: 0 auto;
text-align: left;
}
.hack table {
width: 100%;
margin: 10px 0;
}
.hack td,
.hack th {
height: 30px;
padding: 0 5px;
border: 1px solid #ccc;
}
.hack th {
color: #cc0bf6;
}
.hack th.eq,
.hack td.eq {
width: 350px;
color: #333;
}
.hack th.identifier,
.hack td.hack-data {
width: 350px;
color: #61602f;
}
.hack td.no {
color: #fff;
text-align: center;
background-color: red;
}
.hack td.yes {
color: #fff;
text-align: center;
background-color: green;
}
.hack p b {
color: green;
}
.hack p b.red {
color: red;
}
.hack h2 {
margin: 10px 0 0 0;
font-size: 1.5em;
font-weight: 700;
}
.hack-list {
margin: 10px 0;
}
.hack-list li {
margin-bottom: 5px;
zoom: 1;
}
.hack-list span {
float: left;
width: 15px;
font-family: "\5b8b\4f53";
}
.hack-list-inf {
padding: 0 0 0 15px;
}
.hack-list em {
display: inline-block;
margin: 0 5px;
}
</style>
<h1 id="hack速查表">hack速查表</h1>
<p>
</p><p>建议：以标准浏览器为准书写代码，如遇到兼容问题，尝试其他方法解决问题，在万不得已怕情况下，采用HACK解决。</p>
<p>以下是我总结的HACK书写方法:</p>
<p>浏览器：仅限IE6+，FF，safari,chrome,opera;(截止到2011.10.12非IE均为最新版本)。</p>
<p>测试环境：windows系统;</p>
<p>DOCTYPE:
nbsp;html>.</p>
| 标志符 | 示例 | IE6 | IE7 | IE8 | IE9 | FF | OP | SA | CH |
|---|---|---|---|---|---|---|---|---|---|
| * | .eq {*color:#000;} | Y | Y | N | N | N | N | N | N |
| _ | .eq {_color:#000;} | Y | N | N | N | N | N | N | N |
| + | .eq {+color:#000;} | Y | Y | N | N | N | N | N | N |
| - | .eq {-color:#000;} | Y | N | N | N | N | N | N | N |
| > | .eq {>color:#000;} | Y | Y | N | N | N | N | N | N |
| \0 | .eq {color:#000\0;} | N | N | Y | Y | N | Y | N | N |
| \9 | .eq {color:#000\9;} | Y | Y | Y | Y | N | N | N | N |
| \9\0 | .eq {color:#000\0;} | N | N | N\Y | Y | N | N | N | N |
| :root .xx{xxx:xxx\9;} | :root .eq {color:#a00\9;} | N | N | N | Y | N | N | N | N |
| *+ | .eq {*+color:#000;} | Y | Y | N | N | N | N | N | N |
| *- | .eq {*-color:#000;} | Y | N | N | N | N | N | N | N |
| *html | *html .eq {color:#000;} | Y | N | N | N | N | N | N | N |
| *+html | *+html .eq {color:#000;} | N | Y | N | N | N | N | N | N |
| html* | html* .eq {color:#000;} | Y | Y | N | N | N | N | N | N |
| [; | .eq {color:red;[;color:blue;} | Y | Y | N | N | N | N | Y | Y |
| html>body | html>body .eq {color:blue;} | N | Y | Y | Y | Y | Y | Y | Y |
| html>/**/body | html>/**/body .eq {color:blue;} | N | N | Y | Y | Y | Y | Y | Y |
| html/**/>body | html/**/>body .eq {color:blue;} | N | Y | Y | Y | Y | Y | Y | Y |
| @media all and (min-width:0px){} | @media all and (min-width:0px){.eq {color:#000;}} | N | N | N | Y | Y | Y | Y | Y |
| *:first-child+html | *:first-child+html .eq {color:blue;} | N | Y | N | N | N | N | N | N |
| *:first-child+html{} *html | *:first-child+html{} *html .eq {color:blue;} | Y | N | N | N | N | N | N | N |
| @-moz-document url-prefix(){} | @-moz-document url-prefix(){ .eq {color:blue;}} | N | N | N | N | Y | N | N | N |
| @media screen and (-webkit-min-device-pixel-ratio:0){} | @media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}} | N | N | N | N | N | N | Y | Y |
| @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){} | @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}} | N | N | N | N | N | Y | N | N |
| body:nth-of-type(1) | body:nth-of-type(1) .eq {color:blue;} | N | N | N | Y | Y | Y | Y | Y |
| 标志符 | 示例 | IE6 | IE7 | IE8 | IE9 | FF | OP | SA | CH |
FF:firefox; OP:opera; SA:safari; CH:chrome; Y代表支持，N代表不支持。
注意事项：
-
·
由于各浏览器更新神速，所以有些HACK可能会有变化，所以请大家注意。
-
·
[;此种方式会影响后续样式，不可取。
-
·
\9\0并非对所有属性都能区分IE8和IE9.比如：background-color可以，但background不可以，还有border也不可以。所以在实际用时要测试下。
-
·
当同时出现\0;*;_;时，推荐将\0写在*和_前面。例如:color:red\0;*color:blue;_color:green;可行，否则IE7和IE6里的效果会失效。但border例外，放在前后都可以。保险起见，还是放在前面。
推荐写法：
demo:
.eq {
color:#f00;/*标准浏览器*/
color:#f30\0;/*IE8,IE9,opera*/
*color:#c00;/*IE7及IE6*/
_color:#600;/*IE6专属*/
}
:root .eq {color:#a00\9;}/*IE9专属*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:#450;}}/*opera专属*/
@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:#879;}}/*webkit专属*/
@-moz-document url-prefix(){ .eq {color:#4dd;}}/*firefox专属*/
示例：
nbsp;html>
<meta>
<title></title>
<style>
@media screen\0 {
body {
background: lightblue;
}
}
</style>
运行结果：
1.7、文档模式 （X-UA-Compatible）
文档模式是IE8浏览器以后的一种独有技术，他可以通过meta指定当前文档的渲染模式，如可以把IE8降级成IE6、IE7使用。文档模式的主要作用是影响浏览器显示网页HTML的方式，用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。
<meta> <meta> <meta> <meta>//最新IE
“X-UA-Compatible”的值有两种方式：Emulate+IE版本号，单纯版本号
EmulateIE8：如果声明了文档类型，则以IE8标准模式渲染页面，否则将文档模式设置为IE5
9：强制以IE9标准模式渲染页面，忽略文档类型声明
x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。
<meta> <meta>
Google Chrome Frame(谷歌内嵌浏览器框架GCF)
插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核
未指定文档模式时使用默认的文档模式示例：
nbsp;html>
<meta>
<title>X-UA-Compatible</title>
<style>
#p1 {
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin-left: 100px;
_margin-left: 50px;
}
</style>
<p></p>
运行结果：
强制指定文档模式为IE6，在IE8下会自动变成怪异模式，简单说IE8被当作IE6在用。
多数情况下我们不会这样降级使用，一般会将IE选择为最新版本的文档模式（注意不是文档类型），如果IE浏览器使用了GCF技术我们应该强制使用最新版内核，写入如下：
现在多数网站这是这种写法如baidu。
1.8、javascript兼容
这里有两层意思，第一可以使用javascript操作样式与标签，强制浏览器兼容，比如先使用javascript判断浏览器类型，再操作样式与标签。
第二指javascript存在兼容问题，如一个对象在某些浏览器下没有办法使用，要让javascript更加兼容，可以采取如下办法：
1、使用第三方提代的javascript库，如jQuery，Zepto， Prototype，dojo、YUI、ExtJS
像jQuery这种成熟的javascript库经过多次的版本迭代，已经变得非常成熟，世界上的网站到现在近60%都使用到了jQuery，他的兼容性不错。
2、浏览器检测、重新封装
使用javascript判断浏览器类型，对一些特点的方法或对象重新封装后使用屏蔽浏览的不兼容性。可以使用User-Agent、或特定对象。
示例：
nbsp;html>
<meta>
<title></title>
<h2></h2>
<script>
//用于检测浏览器是否为IE
var isIE=function(){
return !!window.ActiveXObject;
}
function show(info){
document.getElementById("msg").innerHTML+=info+"<br/>"
}
//获得用户代理对象，浏览器与操作系统信息
show(navigator.userAgent);
show(isIE()?"是IE浏览器":"不是IE浏览器");
</script>
效果：
在user-agent中包含有不少的客户端信息，可以解析出判断浏览器部分的内容。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上がCSS3 ブラウザの互換性の問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
cohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AMこの投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。
カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AMCSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。
Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。
UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AMCSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。
微笑んでいますか？Apr 23, 2025 am 09:57 AMまあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです
「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AMイェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。
CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AMこのCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。
Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AMほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7707
15164014139452128825123229