兄弟们好，我们继续来学习网站制作，WEB前端开发，第七章浏览器发展史兼容性
本章提纲：
兼容性1课时26兼容性2课时27兼容性3课时28兼容性4课时29兼容性5
前端开发历史：
年
蒂姆·伯纳斯·李年
NCSA第一个真正意义上的浏览器，而且，是第一个可以正常显示图片的浏览器。
NETSCAPE年，望京浏览器一度占据了80%份额，对微软产生巨大的威胁年，仅成了16个月的网景公司，选择上市园丁开盘价：14$涨到71$万股瞬间被抢购一空互联网创造的第一批百万富翁互联网热潮开始，浏览器成为众人眼中的“蛋糕”网站开始普及，网站开发由程序员扮演
第一次浏览器大战（至年）
战斗方：网景和IE胜者IE（95年Windows95捆绑IE问世，97年可以存储MP3的IE4.0发布）98年IE将当时占市场90%的网景Netscape浏览器彻底击败。网景被迫48亿美元卖给AOL，并开源了浏览器源码。
第一次（web1.0）
为对抗Netscape微软在IE里加入了很多非标准的专属标签，致使后来的IE6.0成为开发者的噩梦，破坏力开放标准；网景为吸引开发者开放源代码创造了Mozilla，虽未能挽回Netscape的市场占有率，但是它衍生出了Phoneix，既现在的Firefox火狐浏览器。微软96%的市场占有率让他开始独断专行，不再按照W3C标准的规范制定规则
第二次浏览器大战（至年）
战斗方：IE阵营（ie内核的国产浏览器），标准浏览器阵营：火狐（Mozilla，网景的前身），opera，chrom摆着：IE胜者：chrom年3月19日chrome份额超过了IE
浏览器第三次浏览器大战（至今天）
本节课我们来具体讲兼容问题
兼容性：页面在不同的浏览器中显示不同的效果
推荐下载的软件：IEtester（百度就能下载到）
在IE下，子级的宽度会撑开父级设置好的宽度盒模型的计算一定要精确，否则，不同IE浏览器可能会显示不同在IE6中，元素浮动，如何宽度需要内容撑开，需要给里面的块元素都添加浮动才可以在IE6，7下，元素要通过浮动并排在同一排，就需要给这行元素都加浮动注意标签的嵌套规则,如:p标签下,不要嵌套块标签在IE6下，元素的高度如果小于19px的时候，会被当成19px来处理，解决方法：overflow：hidden；在IE6下，不支持1px的dotted边框样式解决方法；切北京平铺haslayout在IE下大部分兼容性都是因为haslayout属性的触发问题，尽量触发haslayout属性，可以减少很多IE下的兼容性问题在IE下，父级有边框的时候，子元素的margin值会失效，解放方法：触发父级的haslayout属性IE6下双边距的bug，在IE6下，块元素有浮动，有横向margin的值的时候，横向的margin的值会扩大两倍解决方案：display：inline；margin-left一行中左侧的第一个元素有双边距margin-right一行中右侧的第一个元素有双边距解决方案：display：inline；在IE6，7下，li本身没有浮动，li里面的内容有浮动，li下会产生一个间隙解决方法：1：给li加浮动2：给li加vertical-align：top；在IE6下最小高度的bug和li的间隙问题共存的时候，给li加浮动，vertical-align不好使当一行子级元素，宽度之和与父级的宽度相差超过3px，或者自己元素不满行的情况的时候，最后一行的自己元素的margin-bottom会失效无解决方法，只能尽量避免在IE6下的文字溢出bug，子元素的宽度和父级的宽度，如果相差小于3px的时候，两个浮动元素中间有注释或者内联元素，就会出现文字溢出，内联元素越多，溢出越多解决办法，用块元素的标签，把注释或者内联元素包起来在IE6下，当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效。解决方案：不让浮动元素和绝对定位元素是兄弟关系，用div或者其他标签把a标签包起来在IE6,7下，子级元素有相对定位，父级overflow包不住子级元素解决方案：给父级也加相对定位在IE6下，如果绝对定位的父级宽高是奇数的时候，子级元素的right和bottom值会有1px的偏差无解决方案，只能是尽量避免，前端遇到此问题的时候，就给美工大爷商量下。透明度opacity：0.5；IE6，7，8下css加filter：alpha（opacity=50）；在IE6，7下，输入型的表单标签空间，上下会有1px的间隙解决方案：给input加浮动PNG图片在IE6下的透明问题js文件：链接: