Share some tips on how to write IE browser compatibility issues

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

Use one line of code to solve various CSS compatibility issues in IE6, IE7, IE8, IE9, and IE10.

In the process of writing code on the front end of the website, it is often difficult to solve the compatibility issues of various versions of IE. Now both Baidu and Google have a line of code to solve this compatibility. As below.

Method 1

Baidu also applied this solution to solve the compatibility problem of IE

The source code of Baidu is as follows

1

2

3 < head>

4

5

6

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

You can open Baidu, right-click to view the source code Down! We can see if there is such a line of code in the file header!

This sentence means to force the use of IE7 mode to parse web page code!

Here are some IE usage patterns!

8

2. Google Chrome Frame also allows IE to use Chrome’s engine:

9

3. Force IE8 to use IE7 mode for parsing

10

11 //or

12

4. Force IE8 to use IE6 or IE5 mode for parsing

13

14