【ZT】CSS处理技巧

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中是无效的。

IE和FIREFOX在解析CSS方面的区别

1. 对高度的解析
IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度
Firefox：没有定义高度时，如果内容中包括了图片内容，Firefox的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。
结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！


3.布局问题
当你在写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设计时候可以综合考虑,但最为有效与简单的解决兼容问题还是用TABLE表格,表格在兼容性方面有着不错的表现.


4.鼠标样式
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer

5. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

6. 消除ul、ol等列表的缩进
消除ul、ol等列表的缩进样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效

7. CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。

8. CSS圆角
IE：不支持圆角。
FF： -moz-border-radius:4px，或者
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius- bottomright:4px;。

9. CSS双线凹凸边框
IE：border:2px outset;。
FF：
-moz-border-top-colors: #d4d0c8 white;
-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080;

10. 滤镜
IE中支持使用滤镜,而Firefox中不支持.

11. 禁止选取网页内容：
在IE中一般用js：obj.onselectstart=function(){return false;};
而firefox用CSS:-moz-user-select:none;