ie浏览器兼容性的入门解决方案

Posted 2020-11-29 yanggb

IE浏览器的兼容性素来是令人头疼的问题，大名鼎鼎的FUCK-IE不是浪得虚名的。

这里使用的解决方案是HACK，具体原理就是针对不同的浏览器写不同的html、CSS样式，从而使各种浏览器达到一致的渲染效果。

HTML的兼容写法

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

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

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

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

上面三个例子非常简单，聪明的你肯定能举三反一。

实际应用场景的话多是用于添加一些兼容性的javascript片段。

CSS的兼容写法

CSS的HACK包括属性的HACK和选择器的HACK。

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

只兼容IE6的HACK（属性）

HACK符号是【-】或者【_】，作为前缀在属性前面，中间不加空格。在属性名前加上这个HACK符号，高级浏览器及其他浏览器会认为这是一个未知的属性，不会加载这个属性，也不会报错。

background-color: red; /* 高级浏览器识别 */
_background-color: pink; /* 仅IE6识别 */

兼容IE6/7的HACK（属性）

HACK符号可以是【`】、【~】、【!】、【@】、【#】、【$】、【%】、【^】、【&】、【*】、【(】、【)】、【+】、【=】、【[】、【]】、【|】、【<】、【>】、【,】和【.】中的任一个字符，作为前缀写在属性前面。

background-color: red; /* 高级浏览器识别 */
!background-color: pink; /* 仅IE6/7识别 */

只兼容IE8的HACK（属性）

HACK符号是【/】，必须写在属性值与分号之间，中间不加空格。

background-color: red; /* 高级浏览器识别 */
background-color: pink/; /* 仅IE8识别 */

兼容IE8/9/10的HACK（属性）

HACK符号是【】，必须写在属性值与分号之间，中间不加空格。

background-color: red; /* 高级浏览器识别 */
background-color: pink; /* IE8/9/10识别 */

兼容IE6/7/8/9/10（属性）

HACK符号是【9】，必须写在属性值与分号之间，中间不加空格。

background-color: red; /* 高级浏览器识别 */
background-color: pink9; /* IE6/7/8/9/10识别 */

兼容IE6及以下版本（选择器）

HACK符号是【* html】，注意*和html之间有空格，再加一个空格，后面写选择器。

/* 常规写法 */
.box {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: yellowgreen;
}
/* 兼容写法 */
* html .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
}

兼容IE7及以下版本（选择器） 

HACK符号是【,】，英文的逗号，直接写在选择器的后面，不加空格。

.box, {
    background-color: #999;
}

还有第二种，HACK符号是【*+html】，加一个空格，后面写选择器。

*+html .box {
    background-color: #999;
}

兼容IE6以外的其他版本（选择器）

HACK符号是【html>body】，写在选择器的前面，与选择器之间有一个空格。

html>body .box {
    background-color: yellow;
}

兼容IE6/7以外的版本（选择器）

HACK符号是【html>/**/】或【html~/**/】，写在选择器的前面，与选择器之间有一个空格。

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

html~/**/body .box {
    background-color: purple;
}

以上就是IE浏览器兼容性的入门解决方案。浏览器的兼容性一直是一个很大难题，对于专业前端开发者来说是一个必须勇敢直面的挑战。而对于非专业前端开发者（比如说我）来说，稍微有了解就好了。

 

"你别皱眉，我走就好。"