DOCTYPE 影响 CSS 处理
FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
cursor: pointer 可以同时在 IE FF 中显示， hand 仅 IE 可以
FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格
这里只考虑 IE5.5+ 的情况，有些教程还在讨论 IE5 的兼容性，我觉得就没有什么必要了
1、使整个块在页面居中对齐
IE浏览器：先设定 body 的样式为 text-align: center; 然后指定区块的样式 margin: auto ; text-align: left ;
FF浏览器：指定区块的样式 margin: auto ; 即可
2、使用 XHTML 1.0 Transitional 标准时， width 与 height 不兼容
FF浏览器：用 !important width: width + padding + border;
如：
div.test {
border:25px solid;
background: #ffc;
padding:25px;
width:400px;
width:300px !important;
}
IE是不能识别 width:300px !important; 的，但在 Firefox 中能识别，从而达到两者兼容的目的。
如果这个元素设定了float属性，还可以使用一个更简单的办法使之兼容
加上 display:inline;
即是：
div.test {
border:25px solid;
background: #ffc;
padding:25px;
width:400px;
float:left;
display:inline;
}
注意：在没有指定 float 的时候使用 display:inline; 在FF中是无效的。
3、hand 指针图标属性
FF是不能识别 cursor: hand; 的，可以用 cursor: pointer ，这样两个浏览器都能识别。
4、脚本引入的书写方式
这里讨论的主要是 XHTML 1.0 标准，据说在 1.1 中，脚本引入必须写成
<script type="text/javascript">
为了兼容，可以写成
<script language="text/javascript" type="text/javascript">
因为按XML的标准，多一个无关的属性是不影响解析的，但能达到两者兼容的目的。
5、嵌套DIV：父DIV的高度不能根据子DIV自动变化的解决方案
IE浏览器对于多重DIV嵌套自适应高度是非常理想的，不管使用百分比还是固定值父DIV都会根据子DIV变化而变化，但在FF浏览等，子DIV如果比父 DIV高则会越过父DIV，从而影响总体排版，必须指定父ID为float,然后通过在子DIV后加一个clear的DIV来解决，如：
<div id="parent" style="float:left">
<div id="content"></div>
</div>
<div style="clear: both;"></div>
对高度的解析
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对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。
css解决不同浏览器的兼容问题的方法:
（不是我们需要的方法，我们要达到的要求是尽量不写!important也能解决）
解决这种问题可以通过规范 css 代码，使其符合两种规范的标准样式，也可以在差别处利用！ important 对 firefox 设置属性，或者针对多种浏览器分别各自配置合适的 CSS 文件，再通过判断浏览器选择不同 CSS 实现兼容性。
代码如下：
<!--[endif]-->
<!--[endif]-->
#example { color: #333; } /* FF*/
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
这样在 IE6 中显示字体颜色是 #666 ；在 IE7 中显示的字体颜色是 #999 ；在 FF 中显示的颜色是 #333
3.FF 解决背景的自适应高度问题
①对于背景不能自动延伸的原因上面说的很清楚，解决方法是多嵌套一个层 , 这个层设置浮动，并承担背景，就 ok 了。
下面就简单示意一下
可以这么理解： float 使得层自动获得宽和高
但是有了第三种方法，这种方法好像并不值得推荐。
②另一种方法就是给第一个 div 赋予属性值： display:table ；但这种方法会造成另外一些布局上的错误。可以考虑使用，但不建议使用。
③我想这是最重要的一种方法，但是中间问题很多。方法就是 clear:both 。
.clear{clear:both} 可以使高度向下延续，但是会自动产生行高；
.clear{clear:both;height:0} 在 FF 中清除了行高，但是 IE 里不认；
.clear{clear:both;height:1%} 在 FF 和 IE 中仍然不认；
像之前写的 .clear{clear:both;height:1%;font-size:0px;overflow:hidden} 在 IE 中好使，但在 FF 中却不能让背景颜色延续，除非加上边框。 ！挺有意思，还是不太懂
.clear{clear:both;line-height:1px} 好使！ 我理解是清的这个容器默认是行元素，所以高对它不起作用，所以你无论把 height 设置为几都没有效果，而 line-height 本身就是作用于行元素的，所以好使！
上面理解的不对 ! 重新理解是： IE 里面有默认的行高，必须把行高给清掉，可以用 font-size:0px 或 line-height:0px ；但是这里又有一个问题，就是 height 的值不要用百分数，没有用！
代码如下：
<!--[endif]-->
<!--[endif]-->
#example { color: #333; } /* FF*/
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
这样在 IE6 中显示字体颜色是 #666 ；在 IE7 中显示的字体颜色是 #999 ；在 FF 中显示的颜色是 #333
906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
