前端 PC端兼容性问题总结
1.如果图片加a标签在IE9-中会有边框
2.rgba不支持IE8
3.display:inline-block ie6/7不支持
4.默认的 body 没有 body 去掉 margin 情况下ie5、6、7边缘会很宽margin-top加倍 如果处于无声明状态那么所有的ie浏览器margin-top加倍
解决方案:用 css 给 body 添加 magin 属性为0px
5. IE 6.0 Firefox Opera 等是 真实宽度=width+padding+border
IE5.X 真实宽度=width
解决方案:
方法1.
方法2.
6. height 不能小于16px,设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
7. min-height 不兼容 ie6 7解释为超过高度就撑开,而其他版本浏览器则遮盖下面的层
8. position:fixed IE5 6无法识别此属性
9.浮动的div有 margin_left 属性ie6会加倍 无论兼容视图还是无声明视图
10. cursor 兼容 自定义指针cur格式的图片url路径问题无论是兼容还是无声明版本
11.png图片 IE6里面的png图片不能透明 兼容版本和无声明版本都是
12.img浮动 img标签打回车会造成每个图片之间有缝隙
解决方案:可以删除之间的回车键也可以让这些图片浮动
13.在IE浏览器下 input type="text" 文本框点击时后面会出现"X",以及 type="password "后面会出现眼睛,如何除去这两种默认样式
14.CSS3前缀 -webkit- webkit渲染引擎 chrome/safari
-moz- gecko渲染引擎 firefox
-ms- trident渲染引擎 IE
-o- opeck渲染引擎 opera
动画、过渡、 background-size 都需要加前缀
16. PIE.htc 可以实现很多 css3 属性在IE下的兼容性 如:圆角、阴影、渐变
behavior: url(css/PIE.htc);/ IE边框阴影 /
}`
背景透明rgba
注: PIE.htc 文件路径相对是相对于css文件,并非html文件,以上例子是将 PIE.htc 文件放在与css样式文件同一个文件夹 css 内,而对应的 html 问价与 css 文件夹同级
17.JS实现点击跳转到指定位置