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

Posted yanggb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ie浏览器兼容性的入门解决方案相关的知识,希望对你有一定的参考价值。

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

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

HTML的兼容写法

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

<!--[if IE 6]>
  <p>只有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浏览器兼容性的入门解决方案。浏览器的兼容性一直是一个很大难题,对于专业前端开发者来说是一个必须勇敢直面的挑战。而对于非专业前端开发者(比如说我)来说,稍微有了解就好了。

 

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

以上是关于ie浏览器兼容性的入门解决方案的主要内容,如果未能解决你的问题,请参考以下文章

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

一条代码解决各种IE浏览器兼容性问题

jQuery 入门

ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码

jquery不兼容低版本ie浏览器怎么解决?