浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
做兼容页面的通常方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
问题一：不同浏览器的标签默认的外补丁和内补丁不同
问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
问题三：设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度
问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
问题五：图片默认有间距
问题六：标签最低高度设置min-height不兼容
-----以上摘自 http://developer.51cto.com/art/201008/218335.htm
各浏览器的hack
主要分为三类
1.css属性内部的hack
2.css选择器的hack
3.针对IE的在html文件内的 <!--[ if IE]><style>...</style><![endif]-->
1 css属性内部的hack
Selector {property:value9;} //IE9及以下的浏览器
Selector {property:value ;} //IE8及以上的浏览器
Selector {*property:value;} //IE6,7
Selector {*property:value;} //IE6
!important 可以提高css属性的优先级。
例：设置选择器元素的最小高度
Selector{min-height:200px; height:auto !important; height:200px; overflow:visible;} //在同一个选择器（后面不被重构的情况下）内IE7以上及其他浏览器识别imporatant，将属性height:auto的优先级提高，所以后面紧接的height:200px;便不再读取。而IE6不识别important，则读取height:200px;
2.css选择器的hack
@-moz-document url-prefix() { //只有firefox识别
.selector { property: value; } }
@media screen and (-webkit-min-device-pixel-ratio:0){ //针对Webkit内核的浏览器，如Google Chrome 和 Safari Selector { property: value; } }
*html#uno{color:red} // IE6及一下
*:first-child+html#dos{color:red}// IE7
3.针对IE的在html文件内的 <!--[ if IE]><style>...</style><script>...</script><![endif]-->
针对IE的css和javascript都可放在里面执行
<!--[ if IE]><style>...</style><script>...</script><![endif]--> //针对所有IE浏览器
<!--[ if IE 9]><style>...</style><script>...</script><![endif]--> //针对IE某个浏览器，这里时针对IE9
<!--[ if lt IE 8]><style>...</style><script>...</script><![endif]--> //针对IE8以下浏览器
<!--[ if lte IE 8]><style>...</style><script>...</script><![endif]--> //针对IE8及以下浏览器
<!--[ if gt IE 8]><style>...</style><script>...</script><![endif]--> //针对IE8以上浏览器
<!--[ if gte IE 8]><style>...</style><script>...</script><![endif]--> //针对IE8及以上浏览器