浏览器兼容
由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。
使用Trident内核的浏览器：IE、Maxthon、TT； 使用Gecko内核的浏览器：Netcape6及以上版本、FireFox； 使用Presto内核的浏览器：Opera7及以上版本； 使用Webkit内核的浏览器：Safari、Chrome。
而我现在所说的兼容性问题，主要是说IE与几个主流浏览器如firefox，google等。而对IE浏览器来说，IE7又是个跨度，因为之前的版本更新甚慢，bug甚多。从IE8开始，IE浏览器渐渐遵循标准，到IE9后由于大家都一致认为标准很重要，可以说在兼容性上比较好了，但是在中国来说，由于xp的占有率问题，使用IE7以下的用户仍然很多，所以我们不得不考虑低版本浏览器的兼容。
对浏览器兼容问题，一般分，HTML，Javascript兼容，CSS兼容。（https://blog.csdn.net/xustart7720/article/details/73604651）
其中html相关问题比较容易处理，无非是高版本浏览器用了低版本浏览器无法识别的元素，导致其不能解析，所以平时注意一点就是。特别是HTML5增加了许多新标签，低版本浏览器有点影响时代进步啊
总结之后将经常遇到的浏览器的兼容性问题分为以下九种，其它不常见的关于JS、CSS的兼容性小问题太多，就不再一一罗列，有兴趣可以去网上找找，有很多，如果实在没法解决的情况下可以用CSS hack解决，如果有其他方法解决兼容性，尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎。
一、不同浏览器的标签默认的外补丁和内补丁不同
问题表现：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
解决方案：CSS里 *{margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
二、块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大
问题表现：IE6后面的一块被顶到下一行
解决方案：在float的标签样式控制中加入display:inline;转化为行内属性
备注：横向浮动的div布局，使用上margin进行边界设置时，必然会碰到此问题
三、设置较小高度标签(一般小于10px)，在IE6、IE7，遨游中高度超出设置高度值
问题表现：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度
备注：一般出现在设置小圆角背景的标签里。出现该问题原因是IE8之前的浏览器都会给标签一个最小默认行高的高度，即使标签是空内容，标签的高度还是会有默认行高
四、行内属性标签，设置display:block后采用float布局，又有横向的margin情况，IE6间距bug
问题表现：IE6的间距比超过设置的间距
解决方案：在display:block;后面加入display:inline;display:table;
备注：行内属性标签，为了设置宽度，需要设置为display:block;(表单元素除外)在用float布局且有横向margin后，在IE6下，就具有了块属性float后的横向margin的bug。由于设置为display:inline，高度失效，所有在后面补上display:table。
五、图片默认有间距
问题表现：几个img标签放在一块，有些浏览器会有默认的间距，有通配符也不起作用
解决方案：使用float属性为img布局
备注：img标签是行内属性标签，只要不超出容器高度，img会排在一行里，使用float是比较好的选择
六、标签最低高度设置min-height不兼容
问题表现：min-height本身就是一个不兼容的css属性，所以设置min-height时不能兼容所有浏览器
解决方案：如果设置一个标签最小高度为200px，需要进行设置 {min-height:200px; height:auto !important;
height: 200px; overflow:visible;}
备注：b/s系统前端时，当内容小于一个值时，容器的高度保持该值，当内容大于该值时，高度自适应且不出现滚动条。
七、光标手形
问题表现：firefox不支持hand，但ie支持pointer
解决方案：统一使用cursor:pointer;
八、字体大小定义不同
问题表现：对字体大小small定义不同，Firefox为13px，而IE为16px，差别比较大
解决方法：使用指定的字体大小如14px或者使用em
九、IE6 3px bug
问题表现：左侧div浮动left，右边DIV可以接着横向排列，形成典型一列固定，第二列自适应，IE6出现之间3px间隙
解决方法：对左侧left的盒子补上_margin-right: -3px;
十、其它方面如果要减少浏览器兼容性问题的出现，可以分两种情况：
第一种是企业内部系统：通常会采用一些现成的UI技术，如ext、flex或其它UI框架完成。这些技术自己已经有相当好的浏览器兼容了。
第二种是互联网的：通常也会采用一些JS框架作辅助，如jQuery等作对dom、事件、ajax的兼容，页面上使用hack技术，如IE的*开始的选择器和条件注释作兼容。
css hack
先举一个小例子，简要说明一下CSS hack是干啥的。
比如要分辨IE6和firefox两种浏览器，可以这样写：
div{
background:green;/*forfirefox*/
*background:red;/*forIE6*/(bothIE6&&IE7)
}
我在IE6中看到是红色的，在firefox中看到是绿色的。
解释一下：
上面的css在firefox中，它是认识不了后面的那个带星号的东西是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;*background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。
css hack就是通过这种方式来对浏览器进行兼容性处理。也就是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。因此我们就可以根据不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
针对不同浏览器的网站设计代码总结如下
1、针对I E 系列浏览器的网站设计代码
针对 IE 6 的专属 CSS Hack 网站设计代码 #id{ _display: block; } 也就是在网站设计CSS属性前加一个小划线就好。
针对 IE 7 的专属 CSS Hack 网站设计代码 #id{ *display: block; } 即在网站设计CSS属性前加上一个星号。
针对 IE 8 的专属 CSS Hack 网站设计代码 #id{ margin-top: 10px /9; /*IE8*/} 如上所示，解决办法为在网站设计CSS属性后分号前加上空格与斜线并加入一个数字9即可 。
2、针对火狐的CSS Hack 网站设计代码
想要解决火狐的兼容性只要将CSS代码写入到 @-moz-document url-prefix（）{ } 里面就行了 , 例如 @-moz-document url-prefix() { #id{ display: block; } } 。
3、针对 Safari 的CSS Hack 网站设计代码
Safari是苹果中新的浏览器，解决兼容性的做法是加上@media screen and (-webkit-min-device-pixel-ratio:0)前缀。例如@media screen and (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和火狐相近。
4、针对 Opera 的CSS Hack 网站设计代码
Opera解决兼容性的做法也是加上选择器前缀，例如 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 这个世界上必然不会存在绝对完美的事物，因此运用以上方法让我们的网站设计更好的与各种浏览器兼容的时候其实已经违反了网站制作的W3C标准。
