IE ブラウザーの互換性の問題を記述する方法に関するヒントを共有します。-htmlチュートリアル-php.cn

IE ブラウザーの互換性の問題を記述する方法に関するヒントを共有します。

巴扎黑

リリース： 2017-07-18 17:10:18

オリジナル

1818 人が閲覧しました

用户使用的浏览器五花八门，我们要保证每一种浏览器都能兼容我们的代码，不能要求用户去改变浏览器，那么就得在我们的代码上下功夫。此时我们要用到hack。

HACK就是针对不同的浏览器写不同的HTML、CSS样式，从而使各种浏览器达到一致的渲染效果。

下面我们就分别了解一下HTML的hack和CSS的hack。

（一）、HTML的hack

HTML的hack由注释演变而来，在高级浏览器中注释不会被加载，把IE浏览器的兼容代码写在注释中，IE浏览器会识别。

HTML的hack代码模板：

注：

①用于写兼容的注释，标签内首位都要加！感叹号。

②单词都写在一对中括号中

③IE和版本号之间要加空格

④不加比较单词，表示只兼容这一个版本；

比较单词：lt=less than(小于)、lte=less than or equal (小于等于)、gt=great than(大于)、gte=great than or equal(大于等于)

<!--[if IE ６]><ｐ>只有IE6认识我<／p><![endif]-->

ログイン後にコピー

只要记住这一个模板就知道HTML的兼容怎么写了，下面我们列举几个：

<!--[if gte IE 9]>
       <h1>大于等于IE9的浏览器能看到</h1>
<![endif]-->

ログイン後にコピー

<!--[if lte IE 8]>
       <h1 class="red">您的浏览器版本过低，IE8及以下版本不支持新样式，请更新浏览器</h1>
<![endif]-->

ログイン後にコピー

单独写给IE6的解决兼容问题的HTML代码：<!--[if IE 6]>
     <script src="js/iepng.js?1.1.11" type="text/javascript"></script>
     <script type="text/javascript">
       EvPNG.fix('div,ul,img,li,input,span,b,h1,h2,h3,h4');
     </script>
<![endif]-->

ログイン後にコピー

（二）、CSS的hack

CSS的hack包括：属性的hack和选择器的hack

设置css的hack要注意的是css样式的层叠性，给同一个元素设置的兼容写法必须写在后面，否则会被层叠掉。

（1）属性的hack

①只兼容IE6的hack

hack符：-或_，当做前缀写在属性前面，中间不加空格

在属性名前面加短横-或者下划线_(原理：高级浏览器及其他浏览器会认为这个前缀符号是一个unknown property name)，未知的属性名，不会报错，不予加载。

例：

<span style='color: #000000; font-family: "courier new", courier; font-size: 15px'>background:red;    <span style="color: #008000">//高级浏览器识别</span><span style="color: #ff0000">_</span>background:pink;    <span style="color: #008000">//仅IE6识别</span><br></span>

ログイン後にコピー

②兼容IE6、7的hack

hack符： ` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 中的任一字符，作为前缀写在属性前面

例：

background:red;    //高级浏览器识别！background:pink;    //仅IE6、7识别

ログイン後にコピー

③只兼容IE8的hack

hack符：\0/，必须写在属性值与分号之间，中间不加空格

background:red;    //高级浏览器识别background:pink\0/;    //仅IE8识别

ログイン後にコピー

④兼容IE8、9、10的hack

hack符：\0，必须写在属性值与分号之间，中间不加空格

background:red;    //高级浏览器识别background:pink\0;    //IE8、9、10识别

ログイン後にコピー

⑤兼容IE6、7、8、9、10

hack符：\9，必须写在属性值与分号之间，中间不加空格

（2）选择器的hack

给选择器添加hack，这个选择器中的样式都是IE兼容样式，其他高级浏览器不识别，同理给同一个选择器设置的兼容样式要写在高级浏览器可识别的常规样式后面，否则会被层叠

①IE6及以下版本的hack

hack符：* html，*和html之间有空格，再加一个空格，后面写选择器

例：

<span style='color: #008000; font-family: "courier new", courier; font-size: 15px'><span style="color: #000000"><!--常规写法--></span><br>        .box{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: yellowgreen;
        }<br><span style="color: #000000"><！--兼容写法--></span><span style="color: #ff0000">* html</span> .box{
            width: 100px;
            height: 100px;
            background: skyblue;
        }</span>

ログイン後にコピー

②IE7及以下版本的hack

hack符：，英文逗号，写在选择器后面，不加空格

例：

.box,{
    background: #999;
    border: 10px solid red;

ログイン後にコピー

③兼容IE6以外的其他版本的hack

hack符：html>body，写在选择器前面，与选择器之间有一个空格隔开

例：

html>body .box{
    background: yellow;
}

ログイン後にコピー

④兼容IE6、7以外的版本的hack

hack符：html>/**/或html~/**/,写在选择器前面，与选择器之间有一个空格隔开

例：

html>/**/body .box{
    background: purple;
}

ログイン後にコピー

1 行のコードを使用して、IE6、IE7、IE8、IE9、および IE10 のさまざまな CSS 互換性の問題を解決します。

Web サイトのフロントエンドでコードを記述するプロセスでは、IE のさまざまなバージョンの互換性の問題を解決することが難しいことがよくあります。現在、Baidu と Google の両方が、この互換性を解決するコード行を持っています。以下のように。

方法 1

Baidu は、IE 互換性の問題を解決するためにこのソリューションも適用しました

Baidu のソースコードは次のとおりです

4 {start:newDate*1,pid:109,page:'superpage'}

を開くことができますBaidu を右クリックして表示し、ソースコードをチェックしてください。ファイルヘッダーにそのようなコード行があるかどうかを確認できます。

この文は、Web ページのコードを解析するために IE7 モードの使用を強制することを意味します。

ここでは、いくつかの IE 使用モードを紹介します。

2. Google Chrome Frame では、IE でも Chrome のエンジンを使用できます:

3. IE8 に IE7 モードを使用して解析を強制する

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

IE ブラウザーの互換性の問題を記述する方法に関するヒントを共有します。