2007年1月26日 08:45
2007年1月23日 09:11
[转自]http://blog.goalercn.com/blogview.asp?logID=284
1、IE与Firefox下对CSS解析的区别
对高度的解析
IE:将根据内容的高度变化,包括未定义高度的图片内容,即使定义了高度,当内容超过高度时,将使用实际高度
Firefox:没有定义高度时,如果内容中包括了图片内容,MF的高度解析是根据印刷标准,这样就会造成和实际内容高度不符合的情况;当定义了高度,但是内容超过高度时,内容会超出定义的高度,但是区域使用的样式不会变化,造成样式错位。
结论:大家在可以确定内容高度的情况下最好定义高度,如果真的没有办法定义高度,最好不用使用边框样式,否则样式肯定会出现混乱!
img对象alt和title的解析
alt:当照片不存在或者load错误时的提示;
title:照片的tip说明。
在IE中如果没有定义title,alt也可以作为img的tip使用,但是在MF中,两者完全按照标准中的定义使用
结论:大家在定义img对象时,最后将alt和title对象都写全,保证在各种浏览器中都能正常使用
其他的细节差别
当你在写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对于一些模型的解释会产生很多错误问题,只有多多尝试才能发现原因。
2、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案
1、IE与Firefox下对CSS解析的区别
对高度的解析
IE:将根据内容的高度变化,包括未定义高度的图片内容,即使定义了高度,当内容超过高度时,将使用实际高度
Firefox:没有定义高度时,如果内容中包括了图片内容,MF的高度解析是根据印刷标准,这样就会造成和实际内容高度不符合的情况;当定义了高度,但是内容超过高度时,内容会超出定义的高度,但是区域使用的样式不会变化,造成样式错位。
结论:大家在可以确定内容高度的情况下最好定义高度,如果真的没有办法定义高度,最好不用使用边框样式,否则样式肯定会出现混乱!
img对象alt和title的解析
alt:当照片不存在或者load错误时的提示;
title:照片的tip说明。
在IE中如果没有定义title,alt也可以作为img的tip使用,但是在MF中,两者完全按照标准中的定义使用
结论:大家在定义img对象时,最后将alt和title对象都写全,保证在各种浏览器中都能正常使用
其他的细节差别
当你在写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对于一些模型的解释会产生很多错误问题,只有多多尝试才能发现原因。
2、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案
2007年1月23日 08:43
2007年1月22日 14:51
在Blueidea看到的一段完全使用CSS制作的下拉菜单,绝对的强~因此收藏了一下。
这个样式最大的收获就是CSS也可以像JS一样,使用例如:div.open,a.outer:hover之类实现类似于MoveOut的效果,看完这段CSS样式代码,受益非浅啊~~
经过测试后我并不推荐这种方法制作下拉菜单,他使得在FF和其他浏览器显示不正常,就做为一种思路吧.
这个样式最大的收获就是CSS也可以像JS一样,使用例如:div.open,a.outer:hover之类实现类似于MoveOut的效果,看完这段CSS样式代码,受益非浅啊~~
经过测试后我并不推荐这种方法制作下拉菜单,他使得在FF和其他浏览器显示不正常,就做为一种思路吧.
2007年1月21日 00:21
其实很早就下载了Eric A. Meyer的《CSS权威指南》,不过一直没看,所以css总是写的乱七八糟,半通不通。今天发愤用功,哈哈,把书中的“定位”部分看完了。
要点如下:
1、绝对定位的参照位置是上层最近的position不是static的元素,其实就是说具有position:relative/absolute/fixed属性的上层元素。如果没有,就以body为定位标准。
2、如果想把某个上层作成下层绝对定位的参照位置,可以把上层的position设定为relative偏移为0就可以了
3、position:fixed 为固定定位,参照位置不是父层而是浏览器视窗。所以可以用fixed属性来设定类似传统框架布局,或者飘固定广告或者固定导航都可以。
4、相对定位属性中的正值可以理解为从上层元素边缘向中间移动,而负值可以理解为从边缘向外部移动。
5、相对定位的元素只是从正常的位置上移开,但是它占有的页面位置并不消失而变成空白。
5、visibility可以设置成hidden,这时候元素看不见但是仍旧占有页面位置。display:none;则根本就完全消失。
要点如下:
1、绝对定位的参照位置是上层最近的position不是static的元素,其实就是说具有position:relative/absolute/fixed属性的上层元素。如果没有,就以body为定位标准。
2、如果想把某个上层作成下层绝对定位的参照位置,可以把上层的position设定为relative偏移为0就可以了
3、position:fixed 为固定定位,参照位置不是父层而是浏览器视窗。所以可以用fixed属性来设定类似传统框架布局,或者飘固定广告或者固定导航都可以。
4、相对定位属性中的正值可以理解为从上层元素边缘向中间移动,而负值可以理解为从边缘向外部移动。
5、相对定位的元素只是从正常的位置上移开,但是它占有的页面位置并不消失而变成空白。
5、visibility可以设置成hidden,这时候元素看不见但是仍旧占有页面位置。display:none;则根本就完全消失。











