前端开发IE下兼容性处理
主流浏览器，IE 6，7 ，chrome ，Firefox, Safari
H5标签兼容：IE6无法兼容H5标签兼容，常见标 签，header，footer,section
.IE6下不支持H5标签，通过原生js方法document.createElement(‘header’)动态创建元素; css
中为元素增加display：block；属性。方可成功加载H5元素样式。或者下载html5shiv.js 插件引入到页面更加直接。
同一个父元素box下面有两个元素left和right, left和right 宽度均设为200px; left
设为float：left，right
不浮动情况下设置margin-left：200px会造成在IE6下面产生空隙，解决办法是不能用margin-left。Left和right均采用
float：
IE6下子元素设置的宽和高都是400px，父元素设置宽高200px, 子元素会撑开而是被父元素包裹住，解决措施不建议子元素宽高超过父元素。
P元素包含块元素规则，P元素下面包裹div在chrome下会出错，h标签和td标签均不能嵌套块元素。
margin-top 传递和margin
上下叠压重合问题。父元素box不设置宽高，两个子元素设置一个margin：50px属性后，会导致上下两个子元素上下margin没有，紧贴父元素显
示。解决margin传递：chrome下面直接给父元素设置，border属性；IE需要设置overflow：hidden和zoom:1(针对
IE6). 上下两个子元素的margin是50px而不是100px,
解决方式是设置样式时候尽量使用同一方向的margin，要么设置margin-top或者margin-bottom。
IE6，7双边距：IE下面多个子元素浮动浮动后再设置margin-left属性，第一个元素会产生双倍边距导致元素换行，解决方案：添加*display：。在IE下设置margin-right属性不受影响。
ul下面的多个li内部子元素浮动后，在IE6 下面多个li会产生4px的间隙，解决方案：针对IE6,7给li元素添加垂直对齐vertical-align:top;
display:inline-block属性让IE6,7兼容，需要添加*display：inline和zoom:1.
IE6 最小高度，div设置height：1px; IE下面高度明显高于解决最小高度可以添加*overflow：hidden；IE6 下最小高度19px，解决加上overflow：hidden。
父级和子级都有定位，且父级宽高是奇数，IE下面子元素会和父级元素有1px偏差，例如父级别相对定位，子元素绝对定位，bottom:0;right:0;此时子元素和父元素会有1px空隙。解决方案：父元素宽高设定避免使用奇数。
IE6 下input 元素会有间隙，解决措施给input 增加float属性。
css hack : \9 属性在IE10及9,8.7.6.5下面都支持， *属性是IE7 以及7以下的版本兼容。
_属性是IE6以及6以下的版本。
IE 6不支持PNG24 图片，方式1
引用DD_belatedPNG_0.0.8a.js文件，调用方法DD_belatedPNG..fix(‘img’); 方式2 用滤镜
background:url(“../images/login_jm.png”) no-repeat center top;_
background-image: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’static/images/login_jm.png’);
14 .样式优先级：！important 比行间样式厉害，background-color:red !important;
网友评论