前端开发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;