IE6，7，8兼容

最新推荐文章于 2021-02-19 14:15:43 发布

阳光下的冷静

最新推荐文章于 2021-02-19 14:15:43 发布

阅读量428

点赞数 1

文章标签： IE IE兼容

本文链接：https://blog.csdn.net/m0_37686205/article/details/85615157

版权

问题：假如要做某一种浏览器的兼容问题，现在让我们从html,CSS,JS角度考虑

做IE浏览器的某个版本的兼容，我们可以使用hack技术

HTML的hack:在中写入LE浏览器的兼容代码，这样浏览器可以对应的识别

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

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

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

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

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

如：

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

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

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

属性的hack，有如下几种情况：

①只兼容IE6的hack

hack符：-或_，当做前缀写在属性前面，中间不加空格。原理：高级浏览器及其他浏览器会认为这个前缀符号是一个unknown property name，未知的属性名，不会报错，不予加载

如：background:red; //高级浏览器识别

_background:pink; //仅IE6识别

②兼容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，必须写在属性值与分号之间，中间不加空格

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

选择器的hack，有如下几种情况

①IE6及以下版本的hack

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

例：

.box{

width: 200px;

height: 200px;

border-radius: 50%;

background: yellowgreen;

}
<！--兼容写法-->

* html .box{

width: 100px;

height: 100px;

background: skyblue;

}

②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;

}

JS做某种IE的兼容

有如下几种情况：

使IE5,IE6,IE7兼容到IE8模式


使IE5,IE6,IE7,IE8兼容到IE9模式