首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

解决IE6、IE7、IE8、Firefox兼容的几种议案

2012-11-06 
解决IE6、IE7、IE8、Firefox兼容的几种方案你是否在位IE6、IE7、IE8、Firefox不兼容问题而烦恼,这里向大家简单介

解决IE6、IE7、IE8、Firefox兼容的几种方案
你是否在位IE6、IE7、IE8、Firefox不兼容问题而烦恼,这里向大家简单介绍一下解决IE6、IE7、IE8、Firefox兼容的几种方案,希望对你的学习有所帮助。

解决IE6、IE7、IE8、Firefox兼容的几种方案

浏览器不兼容,你知道源头吗?

凡事都要知其然,才能知其所以然,前端开发的朋友想毕都会碰到浏览器兼容的问题,今天在网上觅到此文,希望对大家有用。

浏览器的不兼容,大家肯定都是深恶痛绝的,往往我们只是去做修补,却忘了更重要的事情,那就是追溯根源,避免类似的不兼容再次出现。在下不才,归纳几点html编码要素,望能指点各位:

1.文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,IE下实际占高16px,下留白3px,Firefox下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。解决方案:给文字设定line-height。确保所有文字都有默认的line-height值。这点很重要,在高度上我们不能容忍1px的差异。

2.Firefox下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而IE下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。

3.还讨论内容撑破容器问题,横向上的。如果float容器未定义宽度,Firefox下内容会尽可能撑开容器宽度,IE下则会优先考虑内容折行。故,内容可能撑破的浮动容器需要定义width。

小实验:有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。

<divstyledivstyle=”background:red;float:left;”>dd</div> <divstyledivstyle=”clear:both;margin-top:18px;background:green”>Firefox</div>

17.IE下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案:给overflow:hidden加position:relative或者position:absolute。另,IE6支持overflow-x或者overflow-y的特性,IE7、Firefox不支持。

18.IE6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。float元素如果作为布局用或复杂的容器,都要给个宽度的。

19.IE6下的bug,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。解决方案给内层相对层float属性。

20.IE6下的bug,<head></head>内有<basetarget=”_blank”/>的情况下,position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。

21.终于来了个Firefox的缺点。width:100%这个东西在IE里用很方便,会向上逐层搜索width值,忽视浮动层的影响,Firefox下搜索至浮动层结束,如此,只能给中间的所有浮动层加width:100%才行,累啊。opera这点倒学乖了跟了IE。

热点排行