前端兼容性问题总结

所谓兼容性问题又被成为网页兼容性或网站兼容性问题，是指网页在不同浏览器和网夜间的兼容问题，因为不同浏览器使用内核及所支持的HTML等网页语言标准不同;以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果。
在网站的设计和制作中，解决兼容问题是非常重要的，做好兼容问题才能让网站在不同浏览器下正常显示，给用户更好的体验。
根据自己的实践和网上的归纳总结，自己也转载过来，遇到同样的问题，方便查阅，在此基础上也会慢慢加入自己所遇到的兼容性问题，不断丰富对该问题的理解。
css兼容性问题

1. 不同浏览器的内边距（padding）和外边距（margin）不同？
   问题：几个标签，不加样式的情况下，不同浏览器下的padding和margin是不同的。
   方案：在css中加 *{ padding:0 ; margin:0; }
   备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

2. 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大?
   问题：IE6中最后面的一块会被顶到下一行，其他浏览器中不会。
   方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性。
   备注：块属性标签：<div>、<dl>、<dt>、<h1>、<h2>、<h3>、<hr>、<li>、<ol>…
   行属性标签<a>、<b>、<img>、<span>、<lable>、<input>、<select>…

3. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度？
   问题：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度。
   方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
   备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

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

5. 图片默认有间距？
   问题：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
   方案：使用float属性为img布局
   备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用 float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

6. 标签最低高度设置min-height不兼容？
   问题：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容。
   方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
   备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

7. 透明度的兼容CSS设置？
   问题：一般就直接 opacity: 0.6 ; IE就 filter: alpha(opacity=60)
   但在IE6下有问题，所以得再加个
   filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

8. 鼠标手势问题
   鼠标的手势有问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer

9. 小于12px的文本解析问题
   问题： chrome下默认会将小于12px的文本强制按照12px来解析。
   方案：给其添加属性-webkit-text-size-adjust: none;

10. 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）？

#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
}

这种情况之下IE会产生200px的距离，解决方案是在float的标签样式控制中加入
display:inline;将其转化为行内属性。(这个符号只有ie6会识别)

#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}