前端浏览器兼容问题&hack

    所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

个人认为前端工作人员要有一颗精益求精的心，凡事做到准确无误精确的1px!这样制作出来的页面后期易维护，代码重用问题少，你好，我好，大家好！！

做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

一、不同浏览器的标签默认的外补丁和内补丁不同

通俗写法是使用通配符将所有标签的内外间距都设置为0，CSS里    *{margin:0;padding:0;}

但是我在写样式之前，首先应该引用样式初始化文件，解决了大多数的标签默认样式问题，一劳永逸，个人偏好喜欢淘宝的方案，例如：

1、淘宝官网样式初始化

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
h1, h2, h3, h4, h5, h6{ font-size:100%; } 
address, cite, dfn, em, var { font-style:normal; } 
code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
small{ font-size:12px; } 
ul, ol { list-style:none; } 
a { text-decoration:none; } 
a:hover { text-decoration:underline; } 
sup { vertical-align:text-top; } 
sub{ vertical-align:text-bottom; } 
legend { color:#000; } 
fieldset, img { border:0; } 
button, input, select, textarea { font-size:100%; } 
table { border-collapse:collapse; border-spacing:0; }

2、腾讯QQ官网样式初始化

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal} 
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word}

3、新浪官网样式初始化

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";} 
 
ul,ol{list-style-type:none;} 
select,input,img,select{vertical-align:middle;} 
 
a{text-decoration:none;} 
a:link{color:#009;} 
a:visited{color:#800080;} 
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

4、网易官网样式初始化

html {overflow-y:scroll;} 
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;} 
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} 
table,td,tr,th{font-size:12px;} 
li{list-style-type:none;} 
img{vertical-align:top;border:0;} 
ol,ul {list-style:none;} 
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;} 
address,cite,code,em,th {font-weight:normal; font-style:normal;}

二、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

这是float布局最常见的浏览器兼容问题，常见症状是IE6中后面的一块被顶到下一行

解决方法：在float的标签样式中加入 display:inline;将其转化为行内属性即可

三、设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题原因：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

解决方法：给超出高度的标签设置overflow:hidden即隐藏超出部分;或者设置行高line-height 小于你设置的高度。

四、行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，在IE6中间距会超出设置的值

备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

解决方法：在display:block;后面加入display:inline;display:table;

四、图片之间默认有间距

方法一：

< img  src = "img/nav/01.jpg" /> <!--这里不要换行-->

< a  href = "#" >< img  src = "img/nav/02.jpg"  onmouseover = "this.src='img/nav/2.jpg'"  onmouseout = "this.src='img/nav/02.jpg'"  border = "0" /></ a >

 

改成这样

< img  src = "img/nav/01.jpg" />< a  href = "#" >< img  src = "img/nav/02.jpg"  onmouseover = "this.src='img/nav/2.jpg'"  onmouseout = "this.src='img/nav/02.jpg'"  border = "0" /></ a >

方法二：img{float:left;}