css 在Firefox 中全乱了

[sljz]

准备在新的项目中完全使用div+css的方式，可是在IE中正常显示的页面在Firefox中就发生了错位，该换行的都不能换行，背景图片也忽上忽下的，请问在设计中应该注意些什么问题才能很好的在各种浏览器中显示正常。

[lynovr]

非常正常 以后开发的时候记得 用firefox开发测试页面
然后在IE下面进行调整

因为firefox是现代浏览器 完全符合web标准

而IE有很多自行的准则 目的是为了向下兼容浏览器 所以有很多怪异模式!

[szyuangyq]

hhoho 我是在设计的时候 调试环境就是用ie和ff同时进行的

[liangtao95]

mark!

[我在地球]

xuexi

[cow8063]

标准

[销魂的拖拉机]

:(

[cceon]

帮你顶一下

[hackem]

先ff再ie

[wsfyhy]

呵呵，给你个建议：IE里面很多地方不用clear 浏览器自动封闭，而FF里面如果用到float或者inline后没有通过clear封闭当前的盒模型，那么下面的东西就彻底乱做一团了，另外要注意IE和FF对于盒模型的解释不同，你的排版尺寸会受影响，也许只是一个像素，你的页面就面目全非了！呵呵

[Dreamia]

有一个很容易碰到的区别，就是padding引起的尺寸变化。
比如一个盒子，<div style="height:200px;width:80px;padding:10px;"></div>
那么按照IE的理解，既然height和width都规定了，而padding是内框，不应该影响尺寸，那么这个盒子就是200*80。
但是，根据FF显示的效果来看，FF将它显示为220*100，估计是将padding也算进去了。而且ff中的div是不扩展的，结果就造成了排版全部乱掉了。
我最初开始设计的时候，在IE上设计的好好的叶面，到FF下一看，惨不忍睹。后来研究了很久才找到上述原因。
另一个需要注意的就是float属性的clear问题了。

[chenguang79]

在FF中必须使用最标准的语句，否则就是报错，受不了啊

[Dreamia]

我还碰到另一个现象：
a {
display:block;
height:40px;
}
a:hover {
height:37px;
border-bottom:3px #003366 solid;
background:#FFFFFF;
}
关键就在border，鼠标没有指上去的时候，链接是透明的，高度40px，无边框；鼠标指向链接的时候，链接是白色的，下面带3px阴影。
在FF中，hover的时候，a区块的高度为37px+3px；而IE中，hover的时候，a区块的高度为40px+3px。

[detailed]

IE和firefox有几个差别，比如
#left{
float:left;
margin:0 0 0 10px;
}
margin+float 并用，IE下margin*2现象。实际左边距就变成20px。而firefox左边距是10px,
有时候也因为这个会错位。
解决方案：display:inline;

还有一些是应加margin和padding的未加。等等。。
我以前也经常遇到IE下正常，firefox下错位，当时我用的排错法，验正每一段代码。。
把出错的地方整理成笔记，以后注意一下就好了。

[blue19960407]

兼容性的问题

[pyuan]

我还碰到另一个现象：
a {
display:block;
height:40px;
}
a:hover {
height:37px;
border-bottom:3px #003366 solid;
background:#FFFFFF;
}
关键就在border，鼠标没有指上去的时候，链接是透明的，高度40px，无边框；鼠标指向链接的时候，链接是白色的，下面带3px阴影。
在FF中，hover的时候，a区块的高度为37px+3px；而IE中，hover的时候，a区块的高度为40px+3px。


------------------------------------------------------------------

a {
display:block;
height:37px;
padding-bottom:3px;
}
a:hover {
height:37px;
border-bottom:3px #003366 solid;
background:#FFFFFF;
}

[simba82]

做的时候用IE与FF对照着来。
属性:值!important;属性:值;
FF,后面是IE的，这是写兼容样式的。

[colorandsong]

二者还是有区别的

[ATHENA112]

最主要的是IE和其他浏览器对于BOX模型解释不同，其他都不是什么大问题。其他浏览大部分都符合标准，而IE为了“人性化”不理W3C的标准。

margin/padding/border会使二者显示的宽度不同。
IE有“人性化”的高度自适应，而后者没有。

其实现在大家这么烦恼都是IE害的，如果他一开始就符合W3C标准那就不会有什么问题了。

[blue19960407]

有高度或宽度值的要用!important;

[FLY]

我也是遇到了相同问题....我是在DW里按标准写的啊...ff还是乱码...