现在的位置: 首页 > 综合 > 正文

div在IE与FireFox中的差别

2013年06月27日 ⁄ 综合 ⁄ 共 1677字 ⁄ 字号 评论关闭

 

<总结> 一、用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的显示偏差。

 

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

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

 

三、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案
<div id="parent">
<div id="content"> </div>
</div>
当Content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案
<div id="parent">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>
在层的最下方产生一个高度为1的空格,可解除这个问题

 

四、 这是自己亲身碰到的,就是在MF中,div的边框和背景颜色都不显示,但是IE中正常。

       <div   style="background:#CCC; border:1px #000 solid;">
                <div style="float:left"></div>

                <div style="float:right"></div>

        </div>

在IE及其IE核心的浏览器下调试显示正常。使用Firefox/opera浏览时却出现最外层Div的背景颜色不起作用的问题。

问题原因:

这是由于在Firefox和opera中:如果里面的DIV是一个漂浮物(float)在而母体是不去计算子体FLOAT之后的HEIGHT。而在IE中支持这种计算,所以IE下正常。所以出现这种问题有两个前提:1.外部div没有设置高度(不推荐);2. 内部div是浮动的(带有float属性)。

       <div   style="background:#CCC; border:1px #000 solid;">
                <div style="float:left"></div>

                <div style="float:right"></div>

                <div style="clear:both;"></div>

        </div>

 

五、关于不能FF自适应高度,IE不认最小高度的解决办法

.showContent{text-indent:2em; min-height:200px; height:auto;}
*html .showContent{text-indent:2em; height:200px;}//这个只有IE才认识,而且优先执行,而且如果IE中内容超出所定的高度,那么它会自动撑大这个高度,导致我们锁定的200px失效,但是我们要的就是这种效果。

这样我们在IE和FF中做的内容显示页就OK了。。

 

抱歉!评论已关闭.