Web开发

注册

 

发新话题 回复该主题

网站制作,WEB前端开发,第七章浏览器发 [复制链接]

1#
北京治疗白癜风的方法 http://pf.39.net/bdfyy/zjft/160311/4785589.html

兄弟们好,我们继续来学习网站制作,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文件:链接:

分享 转发
TOP
发新话题 回复该主题