产生原因
1.浏览器自身核心代码的问题(内核)
2.浏览器厂商为自身利益故意设置的技术问题
###常见浏览器5大内核
1.IE内核(mshtml)或者trident 代表:ie浏览器,遨游浏览器
不开源,只能用于windows平台
2.geocko内核 火狐 开源的,可以跨平台使用
3.webkit内核 老版本的谷歌、苹果浏览器
4.blink内核 新版本的谷歌、欧朋浏览器
5.presto内核 老版本的欧朋
兼容调整优缺点
优点:可以让网页在多个浏览器上运行
缺点:降低代码可读性,造成代码的冗余
图片类
1.图片向下撑大三像素
hack1.display:block;hack2.vertical-align:top;
2.图片水平之间有缝隙
hack1.添加浮动;hack2.写在一行,不敲空格和回车
3.图片添加超链接后,会在IE上出现边框
hack1.border:0或者none;
4.图片格式如果是png8的,没有兼容问题,如果是png-24的,IE6上有背景色,让UI改图片格式(了解)
表单类
1.表单控件水平排列的时候有缝隙
hack1.添加浮动;hack2.写在一行
2.表单控件在垂直方向上顶部有默认间距
添加浮动
3.表单在点击时会有边框显示
outline:none;
IE低版本
4.input去除外边框,border:0;none在IE6,7无效果
5.input里面的内容,在其它浏览器上是垂直居中对齐的,在IE低版本上垂直靠上对齐
hack:给line-height
其它
1.百分比的bug在IE低版本上,50%的宽度+50%的宽>100%
hack:给有浮动的盒子添加clear:right;是可以横着排列,但是最终的结果是大于100%
2.双倍间距:在一个包含结构里,如果给浮动的盒子添加外左或外右间距,在IE低版本,结构上看第一个的间距为双倍
hack:给浮动盒子display:inline;
3.鼠标指针样式的改变cursor:hand;高版本不可以,IE版本可以
hack: cursor:pointer;