H5前端开发中低版本IE浏览器各种兼容问题的解决方案

低版本IE浏览器兼容解决方法用户使用的浏览器五花八门，我们要保证每一种浏览器都能兼容我们的代码，不能要求用户去改变浏览器，那么就得在我们的代码上下功夫。此时我们要用到hack。HACK就是针对不同的浏览器写不同的HTML、CSS样式，从而使各种浏览器达到一致的渲染效果。下面我们就分别了解一下HTML的hack和CSS的hack。一、HTML的hackHTML的hack由注释<!--

-->演变而来，在高级浏览器中注释不会被加载，把IE浏览器的兼容代码写在注释中，IE浏览器会识别。HTML的hack代码模板：注：①用于写兼容的注释，标签内首位都要加！感叹号。②单词都写在一对中括号中③IE和版本号之间要加空格④不加比较单词，表示只兼容这一个版本；比较单词：lt=lessthan(小于)、lte=lessthanorequal(小于等于)、gt=greatthan(大于)、gte=greatthanorequal(大于等于)<!--[ifIE６]><ｐ>只有IE6认识我<／p><![endif]-->只要记住这一个模板就知道HTML的兼容怎么写了，下面我们列举几个：<!--[ifgteIE9]><h1>大于等于IE9的浏览器能看到</h1><![endif]--><!--[iflteIE8]><h1class="red">您的浏览器版本过低，IE8及以下版本不支持新样式，请更新浏览器</h1><![endif]-->单独写给IE6的解决兼容问题的HTML代码：<!--[ifIE6]><scriptsrc="js/iepng.js"type="text/javascript"></script><scripttype="text/javascript">EvPNG.fix('div,ul,img,li,input,span,b,h1,h2,h3,h4');</script><![endif]-->二、CSS的hackCSS的hack包括：属性的hack和选择器的hack设置css的hack要注意的是css样式的层叠性，给同一个元素设置的兼容写法必须写在后面，否则会被层叠掉。（1）属性的hack①只兼容IE6的hackhack符：-或_，当做前缀写在属性前面，中间不加空格在属性名前面加短横-或者下划线_(原理：高级浏览器及其他浏览器会认为这个前缀符号是一个unknownpropertyname)，未知的属性名，不会报错，不予加载。例：background:red;//高级浏览器识别_background:pink;//仅IE6识别

②兼容IE6、7的hack

hack符：

`~!@#$%^&*()+=[]|<>,.

中的任一字符，作为前缀写在属性前面例：background:red;//高级浏览器识别！background:pink;//仅IE6、7识别

③只兼容IE8的hackhack符：\0/，必须写在属性值与分号之间，中间不加空格background:red;//高级浏览器识别background:pink\0/;//仅IE8识别

④兼容IE8、9、10的hackhack符：\0，必须写在属性值与分号之间，中间不加空格background:red;//高级浏览器识别background:pink\0;//IE8、9、10识别

⑤兼容IE6、7、8、9、10hack符：\9，必须写在属性值与分号之间，中间不加空格

（2）选择器的hack给选择器添加hack，这个选择器中的样式都是IE兼容样式，其他高级浏览器不识别，同理给同一个选择器设置的兼容样式要写在高级浏览器可识别的常规样式后面，否则会被层叠①IE6及以下版本的hackhack符：*html，*和html之间有空格，再加一个空格，后面写选择器例：<!--常规写法-->

.box{width:200px;height:200px;border-radius:50%;background:yellowgreen;}

<！--兼容写法-->*html.box{width:100px;height:100px;background:skyblue;}

②IE7及以下版本的hackhack符：，英文逗号，写在选择器后面，不加空格例：.box,{background:#999;border:10pxsolidred;③兼容IE6以外的其他版本的hackhack符：html>body，写在选择器前面，与选择器之间有一个空格隔开例：html>body.box{background:yellow;}

④兼容IE6、7以外的版本的hackhack符：html>/**/或html~/**/,写在选择器前面，与选择器之间有一个空格隔开例：html>/**/body.box{background:purple;}三、盒模型问题（1）DTD问题DTD：文档定义类型，规定了要遵循的书写规范。如果不写DTD，高级浏览器还是可以正常加载，IE6会以怪异模式进行加载。盒模型：正常应该是外扩的（实际占位会因为加了padding和border变大），IE6不写DTD是内减的（实际占位不变，padding和border的占位是向内的）。这也是HTML5的兼容性问题之一。

解决方法：必须写DTD。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">

（2）不支持小于一个文字字号的高度的盒子如果不设置文字字号，IE6中不支持高度低于19px的盒子。如果设置高度低于19px，以19px显示。

解决方法：①设置盒子的内部文字字号为0。font-size:0;②给盒子设置高度，溢出高度的部分隐藏。overflow:hidden;

（3）a标签中图片的边框如果一个插入图片（img标签），外层被a标签嵌套，IE6中图片会有一个蓝色的边框。

去掉边框的方法：清除img默认样式。不论img图片是否放在a标签内，都给他清一下边框样式，将img的border设置为0或none。

（4）块级标签内的图片下边空隙问题块级元素内如果嵌套img标签，高级浏览器会自动被图片撑开。IE6撑开时，底部多出一段距离。

解决方法：给img图片转块。display:block或者给父级元素添加高度，溢出隐藏。

四、浮动（1）不浮动的元素不会钻空同级元素如果一个元素浮动，一个元素不浮动，浮动的元素应该让出标准流位置，后面的元素占有这个位置。高级浏览器中是压盖效果，浮动的盖住了没有浮动的。IE6中并没有压盖，而是水平排列效果。

解决方法：①同级元素要浮动都浮动，不能一部分浮动，一部分不浮动。②制作压盖效果，用定位不要用浮动。

（2）3像素bug问题一个元素浮动，一个元素不浮动，除了并排显示之外，两个元素之间还有一个3px的间距。

解决方法：①不能一个浮动一个不浮动。②如果必须一个浮动一个不浮动，还要解决3像素bug：给浮动的元素添加margin值为-3px，将距离拉近。

（3）双倍margin问题如果一组元素全部进行浮动，而且每个元素都有同方向的margin-left外边距，IE6中第一个HTML元素与父级之间的margin距离是设置的值的两倍。

解决方法：①不要用子级的margin去踹父亲，父子之间的间距用父级的padding挤出来，每个子元素设置与浮动方向相反的外边距。ul{list-style:none;width:980px;height:50px;padding-left:20px;border:5pxsolidred;margin:100pxauto;}ulli{float:left;width:100px;height:50px;background:yellowgreen;margin-right:20px;}

②单独给IE6设置首个元素的外边距减半，其他浏览器默认为原值。IE6中减半的数值自动双倍。ulli{float:left;width:100px;height:50px;background:yellowgreen;margin-left:20px;}ulli.first{_margin-left:10px;}（4）溢出隐藏清除浮动失效overflow：hidden属性在清除浮动时，IE6中可能会失效。不设置宽度和高度：清浮动效果失效。

解决方法：给父盒子设置宽度：清浮动效果生效。

浏览器加载网页时，有两种布局加载机制。有布局的机制：hasLayout，一个元素在加载时，自身的尺寸按照内部子元素、内容和自身设置的尺寸属性进行加载的。没有布局的机制：自身元素加载时，相关尺寸按照父级元素的尺寸进行加载的。

如果要用溢出隐藏清除浮动，应该由子元素的数值决定父元素的数值，符合有布局的机制。想要用溢出隐藏清除浮动：触发hasLayout机制。

触发方法：可以通过设置一些父盒子的有长度、数值的属性去触发。不一定每个有数值的属性每次都能触发成功机制。

有一个叫做zoom的属性，始终能触发有布局的机制。zoom：放大镜。放大缩小盒子自身尺寸的属性。属性值：数字。

放大或缩小显示时，按照盒子原始的自身宽高进行的缩放。必须要知道盒子的原始自身尺寸。作为辅助清除浮动属性：属性值必须为1.div{border:10pxsolidred;overflow:hidden;_zoom:1;只有IE6加载}五、固定定位IE6浏览器不支持固定定位。解决方法：以后用js去模拟固定定位。.box{

width:100px;

height:100px;

text-align:center;

line-height:100px;background:red;position:fixed;top:50%;left:50%;_position:absolute;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight/2-this.clientHeight/2);_left:expression(document.documentElement.clientWidth/2-this.clientWidth/2);}六、盒子透明opacity盒子透明度属性在IE8及以下有兼容问题。解决方法：IE浏览器有自己的透明度设置属性。滤镜：filter。属性值：有很多种滤镜效果的属性值，透明度属性只是其中一种。透明度设置：数值：0-100之间的整数，20表示透明度为20%，等价于opacity的0.2.设置时两个数值必须保持一致。opacity：0.2；filter:alpha(opacity=20);七、图片透明插入图、背景图。使用背景透明的图片：png、GIF。IE6中：不支持背景图和插入图的透明和半透明的png图片。

解决方法：①如果图片是只有透明，没有半透明，可以用GIF格式图片换掉png图片。②通过给IE6浏览器单独加一段js代码，解