标签：
最近在写一个训练的小项目，在写的过程中呢，遇到了许多兼容性的问题，正如之前老师给我们讲的一样，兼容性问题是我们前端程序员必修的课程，也是最重要的课程。而大部分的兼容性问题呢又是出现在IE上，说句玩笑话就是如果没有IE就不会又那么多的兼容性问题可，但是这显然是不可能的，现在市面上还是很大一部分的人在用IE的浏览器，所以IE兼容性问题就必须解决，那么今天就跟大家分享一下关于浏览器的兼容性问题：
1.不同浏览器对HTML标记所具有的内外边距属性具有不同的定义。所以在不同的浏览器上可能内容就会存在移位的问题，因此如果想消除这种差距，应该在相应的CSS部分加入以下CSS代码：
*{margin:0px;padding:0px;}
通过消除浏览器本身的内置边距，来把所有标记的内外边距统一起来。
2.Margin不一致的问题：
当有多张图片需要排在一行时，我们通常使用“Float：Left”来实现，这样一来，浏览器就存在兼容性问题。导致图片与后面的内容存在margin不一致的问题，所以会出现中间有空隙的现象。对此中现象有一种解决方法就是给图片添加“display:inline”来解决。
3.div内容垂直居中问题：
通常我们会利用“vertical-align:middle”来实现，这对于Chrome浏览器来说，是正常的，但是对于IE浏览器来说，却并没有效果。对此，一种较好的解决方法是：将文字的行高设置与div一样时即可解决这个问题，但是有个问题是内容不能换行，不然两行的文字就会间隔开了。
4. margin加倍的问题：
设置为float的div在IE下设置的margin会加倍。这是一个IE6都存在的bug。解决方案呢，是在这个div里面加上 display:inline;
5. 浮动IE产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; /*这种情况之下IE会产生200px的距离, */ display:inline; /*就可以使浮动忽略*/}
这里细说一下block与inline两个元素：
block元素的特点：总是在新行上开始，高度、宽度、行高、边距都可以控制(块元素)；
Inline 元素的特点：和其他元素在同一行上，不可控制(内嵌元素)。
还有你也可以设置display:inline-block这种写法可以让该元素变成行级元素但是还可以像块级元素一样控制元素的属性例如、宽高。
6. IE与宽度和高度的问题
IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。
要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}
html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
当然关于兼容性的问题肯定不仅仅只有这些，还有很多很多的问题我们会在日常编写代码 的过程中遇到并且必须去解决它，所以我们一定要再工作中中注意留意这些小的问题给我们带来的困扰，并且想办法解决，给用户带去更好的用户体验。
标签：
原文地址：http://www.cnblogs.com/xiaomila/p/4581564.html
