CSS兼容问题

IE7,IE8兼容:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
HEAD
1. CSS中几种浏览器对不同关键字的支持，可进行浏览器兼容性重复定义
!important 可被FireFox和IE7识别
* 可被IE6、IE7识别
_ 可被IE6识别
*+ 可被IE7识别
2. IE专用的条件注释
<!--其他浏览器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 适合于IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 适合于IE6及一下 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
3. 几个浏览器对实际像素的解释
IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
4. 鼠标手势问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer

 

5. FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟px，IE也支持此写法，因此统一加px单位。如 Obj.Style.Height = imgObj.Style.Height + ‘px';

6. FireFox无法解析简写的padding属性设置，如padding 5px 4px 3px 1px；必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0；

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

8. CSS控制透明：IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox：opacity:0.6;

 
9. CSS控制圆角：IE：不支持圆角；

FireFox: -moz-border-radius:4px;或
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius- bottomright:4px;
10. CSS双线凹凸边框：IE：border:2px outset;
FireFox：
-moz-border-top-colors: #d4d0c8 white;
-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080;
11. IE支持CSS方法cursor:url()自定义光标样式文件和滚动条颜色风格；FireFox对以上两者均不支持

 
12. IE有Select控件永远处于最上层的bug,且所有CSS对Select控件都不起作用

 
13. IE支持Form中的Label标签，包括图片和文字内容；FireFox不支持包含图片的Label，点击图片不能让标记 label for 的Radio或CheckBox产生效果
14. FireFox中的TextArea不支持onScroll事件

15. FireFox不支持display的inline和block

 
16. FireFox对Div设置margin-left, margin-right为auto时已经居中, IE中不行

17. FireFox对Body设置text-align时, Div需要设置margin: auto(主要是margin-left margin-right) 方可居中

主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

18. FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

19. IE中设置长段落自动换行在CSS中设置word-wrap:break-word；FireFox中使用JS插入 的方法来实现，具体代码如下：
<script type="text/javascript">
/* <![CDATA[ */
function toBreakWord(el, intLen){
var obj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord("div_id", 37);
/* ]]> */
</script>
20. 在子容器加了浮动属性后,该容器将不能自动撑开 (float的div一定要闭合)
解决方法：在标签结束后下一个标签中加上一个清除浮动的CSS clear:both;

 

例如：(其中floatA、floatB的属性已经设置为float:left;)
<div class="colwrapper">

<div id=”floatA” ></div>
<div id=”floatB” ></div>
<div id=”NOTfloatC” ></div>

</div>

#floatA{background:#6600FF; border:1px red solid; width:278px!important; width:300px;float:left;  padding:0 10px;}

#floatB{background:#CCFF00;  width:98px; float:left; border:1px #CCCCCC solid;}

#NOTfloatC{border:1px #CC3399 solid;width:398px;}
　　这里的NOTfloatC并不希望继续平移，而是希望往下排。
　　这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
　　在
<div class=”floatB”></div>
<div class=”NOTfloatC”></div>
　　之间加上
<div class=”clear”></div>
　　这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
　　并且将clear这种样式定义为为如下即可：
.clear{clear:both;}
　　此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
　　当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
　　例如某一个wrapper如下定义：
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto; width:400px;}

21. 浮动后IE6解释外边距为实际边距的双倍
解决办法：加上display:inline
22. IE6下图片下方会有空隙
解决办法：为img加上display:block或设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom
23. IE6下两个层中间有空隙
解决办法：设置右侧div也同样浮动float:left或者相对IE6定义 margin-right:-3px;
24. LI中内容超过长度后以省略号的显示方法
<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>
25. 将元素的高度和行高设为相同值，即可垂直居中文本
<style type="text/css">
<!--
div {
height:30px;
line-height:30px;
}
-->
</style>
26. 对齐文本与文本输入框，须在CSS中增加vertical-align:middle;属性设置（缺点是要控制内容不要换行）
<style type="text/css">
<!--
… …
vertical-align:middle;
}
-->
</style>
27. 支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开，但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置min-height，为了兼容不支持min-height的IE6可以这样定义：
{
height:auto!important;
height:200px;
min-height:200px;
}
28. web标准中IE无法设置滚动条颜色
解决办法：在CSS中对body的设置改为对html的
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>
29. IE6由于默认行高问题无法定义1px左右高度的容器，
解决办法：在CSS中对容器设置如：overflow:hidden | zoom:0.08 | line-height:1px
30. 给Flash设置透明属性可使层显示在Flash之上
<param name="wmode" value="transparent" /> <!-- 解决IE上的问题 //>
<embed wmode="transparent" …… > <!-- 解决FireFox上的问题 //>
31. FireFox设置Padding属性后会相应的增加Width和Height属性值，IE不会
解决办法：用!important方法多定义一套Height和Width
32. FireFox对div与div之间的空格是忽略的，但IE是处理的；因此尽量在两个相连的div之间不要有空格和回车，否则可能会造成不同浏览器之间格式不正确，比如著名的3px偏差；而且原因很难查明
33. 形如如下格式
<div id="parent">
<div id="content"> </div>
</div>
当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展；解决办法在层的最下方产生一个高度为1的空格,代码如下
<div id="parent">
<div id="content"> </div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>
34. IE和FireFox对字体small的尺寸解释不同，FireFox为13px,IE中为16px

35. IE和FireFox对空格的尺寸解释不同，FireFox为4px,IE中为8px

 

36.DOCTYPE 影响 CSS 处理(但这个声明对于WEB标准的验证是非常重要的)

 

37.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;}
　　注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
　　重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

 

38.E5 和IE6的BOX解释不一致
　　IE5下
div{width:300px;margin:0 10px 0 10px;}
　　div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
　　关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）

 

39.关于容器的包涵关系
　　很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

 

40.关于高度的问题
　　如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）

41.DOCTYPE 影响 CSS 处理(但这个声明对于WEB标准的验证是非常重要的)

 

42.DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码<div id="box"> <div id="left"></div> <div id="right"></div></div>