IE和FIREFOX下CSS的区别与解决方法第1/2页
程序员文章站
2022-06-19 13:41:19
css对浏览器器的兼容性具有很高的价值，通常情况下ie和firefox存在很大的解析差异，这里介绍一下兼容要点。 对高度的解析 ie：将根据内容的高度变化，包括未定义高度的...
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自动变化的解决方案
<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的空格，可解除这个问题
3、css div 学习笔记
一、基本上每个区块的div 都要有自己的id，杜绝不同功能的区块用同一个id/class
二、每个稍大的区块div 后面都跟一个<!-- /id -->标记开始、结束
三、隐藏文字的又一种方法 text-indent: -9999px; line-height: 0
四、巧妙地处理并列的两列:
1)
右列为p, width=44.5%, float=left
左列为p.first, border-right: #a7a7a7 1px solid, width=45%
2)
右列#right, margin-left:50%
左列#left, float=left,width=50% border-right:#a7a7a7 1px solid
以上两种方法关键点在于选择其中一个为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:
==========================================================
<div id="container_father">
<div id="container">
<div id="panel"> test<br />
test<br />
test<br />
<!-- id="panel" -->
</div>
<div id="sidebar">
<ul>
<li class="current">预安装检查</li>
<li>阅读 pfc 授权协议</li>
<li>初始化数据库</li>
<li>完成安装</li>
</ul>
<!-- id="sidebar" -->
</div>
<!-- id="container" -->
</div>
</div>
css
=================================================
#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}
#container {
width: 750px;
border: 1px solid #cccccc;
padding: 8px;
margin: 0px;
background-color: #f1f3f5;
float: left;
}
from: http://ulean.zg163.net/
对高度的解析
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自动变化的解决方案
<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的空格，可解除这个问题
3、css div 学习笔记
一、基本上每个区块的div 都要有自己的id，杜绝不同功能的区块用同一个id/class
二、每个稍大的区块div 后面都跟一个<!-- /id -->标记开始、结束
三、隐藏文字的又一种方法 text-indent: -9999px; line-height: 0
四、巧妙地处理并列的两列:
1)
右列为p, width=44.5%, float=left
左列为p.first, border-right: #a7a7a7 1px solid, width=45%
2)
右列#right, margin-left:50%
左列#left, float=left,width=50% border-right:#a7a7a7 1px solid
以上两种方法关键点在于选择其中一个为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:
==========================================================
<div id="container_father">
<div id="container">
<div id="panel"> test<br />
test<br />
test<br />
<!-- id="panel" -->
</div>
<div id="sidebar">
<ul>
<li class="current">预安装检查</li>
<li>阅读 pfc 授权协议</li>
<li>初始化数据库</li>
<li>完成安装</li>
</ul>
<!-- id="sidebar" -->
</div>
<!-- id="container" -->
</div>
</div>
css
=================================================
#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}
#container {
width: 750px;
border: 1px solid #cccccc;
padding: 8px;
margin: 0px;
background-color: #f1f3f5;
float: left;
}
from: http://ulean.zg163.net/
1