div在IE与FireFox中的差别

 

<总结> 一、用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了。。