关于IE浏览器兼容性的一些问题

第一篇博客，就写关于浏览器的一些兼容性问题吧。

说一些题外话，各位能看到这篇博客的也是缘份~本人大三将成为大四狗，毕业在即，一心都是学好前端找份满意的工作。虽然接触前端一年了，但是这过程中断断续续地学，也没找到机会去做项目，尽管基本了解前端开发流程，也学了一些，可是没有实践做项目的经验，还是很虚啊。这段时间重新自学一遍前端，比最初还是思路清晰些。趁此机会，写写博客，记录一下，也诚心期待着博友们的建议与指点。

这篇博客完成下来肯定是整合了很多前人的优秀见解，有不足的敬请指出，非常乐意交流~

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况，浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

IE是个怪胎，起初不参加W3C标准，导致现在它的兼容性问题难以解决（IE绝对是很多程序员的痛~好在IE6/7/8份额减少，IE9/10/11的兼容性良好，为程序员省去很多麻烦）

浏览器兼容检测工具：IETest/superview/其他浏览器插件。最近发现个比IETest更好用的浏览器调试工具——Xenocode Browser Sandbox（完全免费，网址https://turbo.net/browsers），据说这个插件是利用了虚拟机的方式，达到浏览器多版本共存，优点是测试效果跟浏览器的效果一样，并不是模仿出来的，具体怎么使用大家可以自行搜索教程。

浏览器兼容问题(以下为我个人总结+网上学习内容整理，不全，欢迎补充！)

css常见问题

1.Html5标签兼容--可以用JS插件解决

2.元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动

3.第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题--浮动元素层级问题

4.IE6下子元素超出父级宽高，会把父级的宽高撑开--尽量不要让子元素的宽高超过父元素

5.p 包含块元素嵌套规则--p/td/h1~h6不要再嵌套块元素标签

CSS兼容性问题

1.margin兼容性问题

margin-top传递--触发BFC(给父元素加overflow:hidden)、haslayout(针对IE6加 zoom:1)

上下margin叠压--尽量使用同一方向的margin，比如都设置top或者bottom

2.display:inline-block--IE6不支持display:inline-block，解决方案 *display:inline; zoom:1;（ zoom:1触发haslayout）

3.IE6最小高度问题--IE6最小高度19px，解决方案 overflow:hidden

4.IE6双边距--当元素浮动后再设置margin后,就会产生双倍边距，针对IE6/7添加  *display:inline;

5.li里子元素都浮动的话，在IE6/7下方会产生4px间隙问题--添加垂直对齐
*vertical-align:top;

6.两个浮动元素之间有注释或者内联元素并且和父级宽度相差不超过3px，导致多出来一点内容--解决方案：两个浮动元素之间避免出现注释或者内联元素；与父级宽度相差3px或以上

7.IE6/7 父级元素的overflow:hidden 是包不住子级的relative--解决方案：针对IE6/7给父级加 *position:relative;

8.IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差--避免父级宽高出现奇数

9.IE6下绝对定位元素和浮动元素并列绝对定位元素消失--让绝对定位元素和浮动元素不处在同级

10.IE6下input的空隙--给input元素添加 *float:left;

11.IE6下输入类型表单控件背景问题--设置background-attachment:fixed;

关于不同浏览器的标签默认的margin值和padding值不同

   通过对CSS初始化样式来消除差异，当然，初始化样式往往会对SEO（搜索引擎优化）有一定的影响，但鱼与熊掌不可兼得。

   最简单的初始化方法是*{padding:0;margin:0;}，不过这种方法不建议。

   此处贴出马云爸爸淘宝的样式初始化供参考：

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;}

fieldest,img{ border:0;}

button,input,select,textarea{font-size:100%; }

table{ border-collapse; border-spacing:0;}

关于css hack——针对不同的浏览器写不同的CSS样式的过程

\9 ——IE10及IE10以下版本的IE浏览器

 * ——IE7及IE7以下版本的IE浏览器

  _——IE6及IE6以下版本的IE浏览器

（由于hack不是太标准，建议尽量不要使用）