欢迎来到福编程网,本站提供各种互联网专业知识!

IE和FIREFOX下CSS的区别与解决方法第1/2页

发布时间:2007-03-26 作者: 来源:转载
CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍一下兼容要点。对高度的解析IE:将根据内容的高度变化,包括未定义高度的图片内容,即使定义了高度,当内容超过高度时,将使用实际高度Firefox:没有定义高度时,如
CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍一下兼容要点。
对高度的解析
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自动变化的解决方案


当Content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。解决方案




在层的最下方产生一个高度为1的空格,可解除这个问题

3、CSSDIV学习笔记
一、基本上每个区块的div都要有自己的id,杜绝不同功能的区块用同一个id/class

二、每个稍大的区块div后面都跟一个标记开始、结束

三、隐藏文字的又一种方法TEXT-INDENT:-9999px;LINE-HEIGHT:0

四、巧妙地处理并列的两列:
1)
右列为P,width=44.5%,float=left
左列为P.first,border-right:#a7a7a71pxsolid,width=45%
2)
右列#right,margin-left:50%
左列#left,float=left,width=50%border-right:#a7a7a71pxsolid

以上两种方法关键点在于选择其中一个为float=left

五、随机的切换图片:
#random{
BACKGROUND:url(/rotate.php);
}
这个方法很巧妙。

4、关于div的高度自适应
今天小尿让我帮他的页子解决一个问题,就是div的高度自适应,也就是在一个父级div中嵌套一左一右两个子div,右边的子div内容可无限扩展,而可以使得父级div的高度能被无限拉长,用一般的布局方法,在IE中可以正确浏览,在Mozilla中父级div的高度就固定在10px左右,无法自适应高度,height:auto也不行,怎么办呢。网上参考到一篇资料,要实现自适应高度,div层必须具有float属性,于是我开始动手试验,float:left的话,div就跑到页面最左边去了,这好办,我在它的外面再套一层div,把位置定好,那么里面的就算float:left也不会被移动位置了。

xhtml:
==========================================================



test


test


test










CSS
=================================================
#container_father{
margin-left:auto;
margin-right:auto;
padding:0px;
width:750px;
}

#container{
width:750px;
border:1pxsolid#cccccc;
padding:8px;
margin:0px;
background-color:#F1F3F5;
float:left;
}

FRom:http://ulean.zg163.net/
当前1/2页12下一页阅读全文

相关推荐