Partagez quelques conseils sur la façon d'écrire les problèmes de compatibilité du navigateur IE-tutoriel HTML-php.cn

Partagez quelques conseils sur la façon d'écrire les problèmes de compatibilité du navigateur IE

巴扎黑

Libérer： 2017-07-18 17:10:18

original

1818 Les gens l'ont consulté

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

单独写给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]-->

Copier après la connexion

（二）、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>

Copier après la connexion

②兼容IE6、7的hack

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

例：

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

Copier après la connexion

③只兼容IE8的hack

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

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

Copier après la connexion

④兼容IE8、9、10的hack

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

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

Copier après la connexion

⑤兼容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>

Copier après la connexion

②IE7及以下版本的hack

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

例：

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

Copier après la connexion

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

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

例：

html>body .box{
    background: yellow;
}

Copier après la connexion

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

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

例：

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

Copier après la connexion

Utilisez une ligne de code pour résoudre divers problèmes de compatibilité CSS dans IE6, IE7, IE8, IE9 et IE10.

Lors du processus d'écriture du code sur le front-end du site Web, il est souvent difficile de résoudre les problèmes de compatibilité des différentes versions d'IE. Désormais, Baidu et Google disposent d'une ligne de code pour résoudre cette compatibilité. Comme ci-dessous.

Méthode 1

Baidu a également appliqué cette solution pour résoudre les problèmes de compatibilité avec IE

Le code source de Baidu est le suivant

3 < head>

6 Recherchez simplement Baidu et vous saurez

7 <script>varwpo={start:newDate*1,pid:109 ,page:'superpage'}</script>

Vous pouvez ouvrir Baidu, faites un clic droit pour voir le code source Down! Nous pouvons voir s’il existe une telle ligne de code dans l’en-tête du fichier !

Cette phrase signifie forcer l'utilisation du mode IE7 pour analyser le code de la page Web !

Voici quelques modes d'utilisation d'IE !

5. Si une version spécifique d'IE prend en charge plusieurs modes de compatibilité requis, par exemple :

Étiquettes associées：

firefox html webkit

source：php.cn

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Partagez quelques conseils sur la façon d'écrire les problèmes de compatibilité du navigateur IE