CSS解析在IE与Firefox下的区别

开发 前端
本文向大家描述一下IE与Firefox下对CSS解析的区别,主要包括对高度的解析,img对象alt和title的解析以及其他细节区别。

你对IE与Firefox下对CSS解析的区别是否了解,这里和大家分享一下,希望对你的学习有所帮助。

IE与Firefox下对CSS解析的区别

1、对高度的解析

IE:将根据内容的高度变化,包括未定义高度的图片内容,即使定义了高度,当内容超过高度时,将使用实际高度。

Firefox:没有定义高度时,如果内容中包括了图片内容,MF的高度解析是根据印刷标准,这样就会造成和实际内容高度不符合的情况;当定义了高度,但是内容超过高度时,内容会超出定义的高度,但是区域使用的样式不会变化,造成样式错位。

结论:大家在可以确定内容高度的情况下***定义高度,如果真的没有办法定义高度,***不用使用边框样式,否则样式肯定会出现混乱!

2、img对象alt和title的解析

alt:当照片不存在或者load错误时的提示;
title:照片的tip说明。
在IE中如果没有定义title,alt也可以作为img的tip使用,但是在MF中,两者完全按照标准中的定义使用

结论:大家在定义img对象时,***将alt和title对象都写全,保证在各种浏览器中都能正常使用

3、其他的细节差别

当你在写css的时候,特别是用float:left(或right)排列一窜图片时,会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border:0来约束,都无济于事。

其实这里还有另外一个问题,就是IE对于空格的处理,firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写,中间不要有回车或者空格。不然也许会有问题,比如3px的偏差,而且这个原因很难发现。

非常不走运的是我又碰到了这样的问题,多个img标签连着,然后定义的float:left,希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。

后来的解决方法是在img外面套li,并且对li定义margin:0,这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题,只有多多尝试才能发现原因。

【编辑推荐】

  1. 探究IE7beta2的CSS兼容性
  2. IE6、IE7、Firefox中margin问题解决办法
  3. DIV布局规范中CSS类及id命名方式
  4. CSS兼容:解决IE6、IE7和IE8的兼容问题妙招
  5. 将XHTML+CSS页面转换为打印机页面技巧
责任编辑:佚名 来源: javaeye.com
相关推荐

2010-08-20 14:47:02

IEFirefoxCSS

2010-08-20 13:02:09

IEFirefox

2010-08-24 10:53:49

CSSpaddingIE

2010-08-20 13:34:12

IEFirefoxJavascript

2010-08-18 15:41:38

IE6E7Firefox

2010-08-23 16:09:31

IEfirefoxPadding

2010-10-08 14:39:43

IE6DIVIE7

2010-08-18 13:23:36

FirefoxHTML

2010-08-19 13:54:51

FirefoxIECSS

2010-09-16 13:33:47

IE6IE7IE8

2010-08-19 09:09:53

FirefoxIECSS

2010-10-09 12:43:20

JSfirefox

2010-08-16 15:15:12

CSSFireFoxIE

2010-09-06 15:06:29

IE6IE7Firefox

2010-08-27 15:44:47

2010-09-15 11:08:48

CSSIE6IE7

2010-09-01 15:16:47

CSSIEFirefox

2010-08-31 09:24:29

FireFoxIECSS

2009-06-09 21:46:18

JavaScript差IEFirefox

2010-09-16 13:17:31

IE6IE7IE8
点赞
收藏

51CTO技术栈公众号