前端兼容性问题总结前端兼容性问题总结(PC端端)
本文主要对前端 PC端兼容性问题进行总结，具有一定的参考价值，下面跟着小编一起来看下吧
1.如果图片加如果图片加a标签在标签在IE9-中会有边框中会有边框
解决方案解决方案:
img{border:none;}
2.rgba不支持不支持IE8
解决方案解决方案:可以用 opacity
eg:
opacity:0.7;/*FF chrome safari opera*/
filter:alpha(opacity:70);/*用了ie滤镜,可以兼容ie*/
但是,需要注意的是,opacity会影响里面元素的透明度
3. display:inline-block ie6/7不支持不支持
解决方案解决方案:
display:inline-block;
*display:inline;
4.默认的默认的body没有没有body去掉去掉margin情况下情况下ie5、、6、、7边缘会很宽边缘会很宽margin-top加倍加倍 如果处于无声明状态那么所有的如果处于无声明状态那么所有的ie浏览器浏览器margin-top加倍加倍
解决方案解决方案:用css给body添加magin属性为0px
body{margin:0;}
5.IE 6.0 Firefox Opera等是等是 真实宽度真实宽度=width+padding+border
IE5.X 真实宽度=width
解决方案解决方案:
方法1.
div.content {
width:400px; //这个是错误的width(对于ie5来说是正确的），所有浏览器都读到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
}
方法2.
div.content {
width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用
}
6.height不能小于不能小于16px,设置较小高度标签（一般小于设置较小高度标签（一般小于10px），在），在IE6，，IE7，遨游中高度超出自己设置高度，遨游中高度超出自己设置高度
解决方案解决方案:overflow设置为hidden
7.min-height不兼容不兼容 ie6 7解释为超过高度就撑开，而其他版本浏览器则遮盖下面的层解释为超过高度就撑开，而其他版本浏览器则遮盖下面的层
解决方案解决方案:min-height:200px; height:auto !important; height:200px; overflow:visible;
8.position:fixed IE5、、6无法识别此属性无法识别此属性
解决方案解决方案:
<!--[if lte IE 6]>
<style type="text/css">
html {
/*这个可以让IE6下滚动时无抖动*/
background: url(about:black) no-repeat fixed
}
#demo_t, #demo_b, #demo_l, #demo_r {
position: absolute;
}
#demo_t, #demo_b {
/*这个解决body有padding时，IE6下100%不能铺满的问题*/
width: expression(offsetParent.clientWidth);
}
/*下面三组规则用于IE6下top计算*/
#demo_l, #demo_r {
top: expression(offsetParent.scrollTop + 300);
}
#demo_t {
top: expression(offsetParent.scrollTop);
}
#demo_b {
top: expression(offsetParent.scrollTop + offsetParent.clientHeight-offsetHeight);
