兼容页面的方法：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
问题一：不同浏览器的标签默认的外补丁和内补丁不同
症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大
解决：css里面加*{margin:0;padding:0;}
问题二：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
症状:常见症状是ie6中后面的一块被顶到下一行
解决：在float的标签样式控制中加入 display:inline;将其转化为行内属性
问题三：设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度
症状：ie6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
解决：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第3种）
症状：ie6里的间距超过设置的间距
解决：在display:block;后面加入display:inline;display:table;
备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在ie6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
问题五：图片默认有间距
症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题1中提到的通配符也不起作用。
解决：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。
问题六：标签最低高度设置min-height不兼容
症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容。
解决：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注：在B/S系统前端开时，有很多情况下我们有这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
问题七：透明度兼容设置
解决：
.class{
filter:alpha(opacity=50); //兼容ie
-moz-opacity:0.5; //火狐
-khtml-opacity: 0.5; //safari
opacity: 0.5;
}问题八：盒子模型bug
症状：给一个元素设置了高度和宽度的同时，还为其设置margin和padding的值，会改变该元素的实际大小。
解决：在需要加 margin和padding的div内部加一个div,在这个div里设置margin和padding值。
问题九：IE6中的列表li楼梯状bug
症状：通常在li中的元素（比如a）设置了浮动float，但li本身不浮动。
解决：给ul li{float:left;}或 ul li{display:inline;}
问题十：li空白间距
症状：在IE下，会增加li和li之间的垂直间距
解决：给li里的a显式的添加宽度或者高度li a{width:20px;}；或li a{display:block;float:left;clear:left;}；或li {display:inline;}li a{display:block;}
问题十一：overflow：auto;和position:relative的碰撞
症状：此bug只出现在IE6和IE7中，有两个块级元素，父元素设置了overflow：auto;子元素设置了position:relative;且高度大于父元素，在IE6-7中子元素不会被隐藏而是溢出。
解决：给父元素也设置position:relative;
问题十二：浮动层的错位
症状：当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7、IE8及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题。
解决：overflow：hidden;
问题十三：IE的图片缩放
症状：图片在IE下缩放有时会影响其质量
解决：img{ -ms-interpolation-mode:bicubic;}//这个是解决图片失真的自带属性，只有IE有
问题十四：IE6下png图片的透明bug
症状：使用透明图片,使用png24或png32图片在IE6下面显示图片会有一层淡蓝色的背景
解决：
.img{
background:url('图片路径');
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片路径',sizingMethod='scale');
}
img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片路径',sizingMethod='scale');}
问题十五：<iframe>透明背景bug
症状：在IE浏览器中，<iframe>框架不会自动把背景设为透明
解决：<iframe src="index.html"allowTransparency="true"></iframe>,在iframe调用的index.html页面中设置 body{background-color: transparent;}
问题十六：禁用IE默认的垂直滚动条
解决：html{ overflow:auto;}
问题十七：a(有href属性)标签嵌套下的img标签，在IE下会带有边框解决：a img{border:none;}样式。
问题十八：input边框问题。
症状：去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效
解决：border:0或border:0 none;或border:none；border-color:transparent;，推荐用第三种方案。
问题十九：如何定义1px左右高度的容器？
IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
问题二十：IE6的margin双倍边距bug问题
解决办法是加上display:inline;
问题二十一： IE6两个层之间3px的问题
症状：左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距
解决：1、右边层也采用浮动 float
2、左边层添加属性 margin-right:-3px;
问题二十二： IE6-7 line-height失效的问题
症状： 在ie中img与文字放一起时， line-height不起作用
解决：都设置成float
问题二十三： IE6 子元素绝对定位的问题
症状：父级元素使用padding后，子元素使用绝对定位，不能精确定位
解决：在子元素中设置 _left:-20px; _top:-1px;
问题二十四： td自动换行的问题
症状：Table宽度固定，td自动换行
解决：设置Table的table-layout:fixed，td的word-wrap:break-word
问题二十五： ul浮动后，margin变大
症状：ul设置 float后，在ie中margin将变大
解决：设置ul的display:inline，li的list-style-position:outside