前端兼容性相关的问题

首先先解释一下浏览器为什么会产生兼容问题
第一个是浏览器种类很多，但是它们采用的内核无非就是以下几种
简称五大浏览器四大内核
1、Trident内核 IE内核 IE浏览器
2、Webkit内核 以前Chrome采用的现在是safari采用该内核
3、Gecko内核 Firefox采用的
4、Presto(废弃)
5、Opera最初是自己的Presto内核,后来是Webkit,现在是Blink.
其余的向国产的浏览器无非是在这几种内核上进行包装，本质还是这几种内核
第二是因为内核不同同时各大厂商出于自身利益考虑而设置的种种技术壁垒
第三是由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和
浏览器兼容问题如何解决
先调试高版本的Chrome与Firefox最后调试IE浏览器
常见的浏览器兼容性问题
A、img相关的兼容以及解决方法
图片加上a标签的时候在IE显示边框
HACK：border:0或者border:none
2、图片缝隙
插入图片的时候图片会向下撑大3px
HACK:display:block或者vertical-align:top
B、表单相关的兼容以及解决方法
hack:给表单元素添加声明：float:left;
C、1、margin-top的兼容
设置了margin-top属性后，margin-top的属性值添加给父元素
hack1:给子元素或者父元素设置浮动
hack2：给父元素添加上边框
hack3：给父元素添加overflow：hidden；
2、鼠标指针
cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明。
hack：cursor:pointer
3、透明属性
兼容其他浏览器写法：opacity:value;(value的取值范围0-1;
IE浏览器写法：filter:alpha(opacity=value);取值范围 0-100(整数)
4、谷歌浏览器最小字号支持到12px，12px以下的字号不支持
hack1：直接切图
hack2：在html或者body里添加一句谷歌浏览器专有的属性
html,body{ -webkit-text-size-adjust:none; }
注意：在新版本的谷歌浏览器里已经无效。
hack3：CSS3的一个缩放属性：transform:scale()
例如：.a3{font-size: 10px;transform: scale(0.83);float: left;transform-origin: left;}
/这个数字0.833，是缩放比例，可以根据你自己的情况不同而不同。/
5、所有浏览器的字体不统一
hack：给body统一设置字体 比如font-family:微软雅黑