关注前端开发
关注用户体验

DIV+CSS浏览器的兼容性

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

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

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

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

a.<div style=”border:1px solid red;height:10px”></div> b. <div style=”border:1px solid red;width:10px”></div>

c. <div style=”border:1px solid red;float:left”></div> d. <div style=”border:1px solid red;overflow:hidden”></div>

上面的代码在不同浏览器中是不一样的,实验起源于对小height 值div 的运用,<div style=”height:10px;overflow:hidden”></div>,小height 值要配合overflow:hidden一起使用。实验好玩而已,想说明的是,浏览器对容器的边界解释是大不相同的,容器内容的影响结果各不相同。

4.最被痛恨的,double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案,给浮动容器定义display:inline。

5.mirror margin bug,当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。 padding也会出现类似问题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件,还没系统整理。解决方案:外层元素设定border 或 设定float。

引申:ff 和ie 下对容器的margin-bottom,padding-bottom的解释有时不一致,似乎与之相关。

6. 吞吃现象。还是ie6,上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

7.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。解决方案:用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。

8.img 下的留白,大家看这段代码有啥问题:

<div>
<img src=”” mce_src=”” />
</div>

把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写

<div>
<img src=”” mce_src=”” /></div>

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案:给img设定 display:block。

9. 失去line-height。<div style=”line-height:20px”><img />文字</div>,很遗憾,在ie6下单行文字 line-height 效果消失了。。。,原因是<img />这个inline-block元素和inline元素写在一起了。解决方案:让img 和文字都 float起来。

引申:大家知道img 的align 有 text-top,middle,absmiddle啊什么的,你可以尝试去调整img 和文字让他们在ie和ff下能一致,你会发现怎么调都不会让你满意。索性让img 和文字都 float起来,用margin 调整。

10.clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层,这样有问题,不仅仅是ff和op下失去margin效果,ie下某些margin值也会失效
<div style=”background:red;float:left;”>dd</div>
<div style=”clear:both;margin-top:18px;background:green”>ff</div>

11.ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。解决方案:给overflow:hidden加position:relative或者position: absolute。另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。

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

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

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

15,有时候加上div{overflow:hidden}这个样式那三个浏览器就会相同了

赞(1)
未经允许不得转载:大前端 » DIV+CSS浏览器的兼容性
分享到: 更多 (0)

评论 9

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #7

    Hi there, i just thought i would publish and now let you know your sites style is really smudged within the K-Melon browser. Anyhow maintain in the very good work.

    Archie Talburt1周前 (05-14)回复
  2. #6

    What your stating is absolutely correct. I know that everyone have to say the identical matter, but I just believe that you place it in a way that everyone can understand. I also love the photographs you put in the following. They match so effectively with what youre attempting to say. Im confident youll get to so many individuals with what youve acquired to say.

    Nonton Anime2周前 (05-10)回复
  3. #5

    You were very interesting.. But sadly I didnrrrt accept them much :/ Although I may disagree I still support you as how confident happen to be on your writing lol

    Lenny Tulis1个月前 (04-08)回复
  4. #4

    After checking out a number of the blog articles on your site, I really appreciate your technique of writing a blog. I added it to my bookmark site list and will be checking back soon. Please check out my website too and tell me what you think.

    Apex Legends Tiers2个月前 (03-31)回复
  5. #3

    Definitely, Apple’s instance retail store is by way of distance. It’s a really variety of all kinds with programs versus a fairly sorrowful choice a handful for the purpose of Zune. Microsof company is applications, specially in the realm of exercises, still I am not sure It’s safe to require to wagered with the success detail aspect is important for your needs. Ipod could be a even better determination if so.

    my singing monsters2个月前 (03-28)回复
  6. #2

    Interesting read i think your website is great with informative content which i like to add to my bookmarks. I’d like to share everyone

    Judith Gorrell2个月前 (03-11)回复
  7. #1

    感觉DIV和CSS好难啊,,学得有点乱

    广州seo8年前 (2011-08-14)回复

themebetter 国内更好的WordPress主题服务商

立即前往