css hack&常用CSS兼容技巧
作为一个合格web前端人员，掌握各个浏览器对CSS的兼容性是比不可少的一种能力，也是将你与数不尽前端工作人员区分开来的一个重要指标，还等什么，赶快成为那少数的一部分吧！
下面是一些常用的CSS兼容技巧
1)火狐下给div设置padding后会导致 width和height 增加, 但IE不会.(可用!important解决)
2)垂直居中，将 line-height设置为当前div相同的高度, 再通过vertical-align: middle；( 注意内容不要换行)
3)水平居中，margin:0 auto;(当然不是万能)
4)若需给a标签内内容加上样式, 需要设置 display: block;(常见于导航标签)
5)浮动IE产生的双倍距离
在IE下，当一个div设置了float后，然后给他设置margin，就会出现加倍的margin，解决的办法是给div设置 display:inline。
<div id=”float”></div>
相应的css为
#float
{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可 控制(内嵌元素);
6)IE和FF对盒模型的解释区别
#browserTest{ width: 650px !important;width: 648px;padding-left:2px;background:#fff; }
browserTest显示的宽度是650px；
IE Box的总宽度是:width+padding+border+margin宽度总和；
FF Box的总宽度就是:width的宽度，padding+border+margin的宽度在含在width内。
如果有BOX{WIDTH:”300″; PADDING:”5PX”;}
则BOX在IE的宽度应该为:310
而在FF的宽度则是300
所以在BOX有填充的情况下应该这样使用
BOX{WIDTH:”300″ !IMPORTANT; WIDTH:”290″;}
7)ul标签在 FF下面默认有list-style和padding, 最好事先声明, 以避免不必要的麻烦;(常见于导航标签和内容列表)
8)作为外部wrapper的div不要定死高度, 最好还加上 overflow: hidden;以达到高度自适应;
9)页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通 过Javascript的判断来实现最小宽度。
10:万能float闭合
将以下代码加入Global CSS 中,给需要闭合的div加上
<style>
/* Clear Fix */
.clearfix:after
{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
*html .clearfix{
height:1%;
}
*+html .clearfix{
height:1%;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block；}
/* End hide from IE Mac */
/* end of clearfix */
</style>
/**********************************************/
<div id=”wrap”>
<div>
<h1>Float left</h1>
</div>
<div>
<h1>Float right</h1>
</div>
</div>
#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
Hack 的顺序 使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略, 顺序如下:
Firefox -> IE6 -> IE7 -> 其他
Hack 的方法 说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.
1. 同一文件中处理.
如: id=”bgcolor” 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色.
1
2
3
4
5
6
7 #bgcolor {
background : red!important ; /* Firefox 等其他浏览器 */
background : blue ; /* IE6 */
}
*+html #bgcolor {
background : green!important ; /* IE7 */
} IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue.
IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高.
Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高.
上述的优先符号均是 CSS3 标准允许的, 其他浏览器也还有其他的 Hack 方法, 但我迄今还没遇到过 Firefox 正常, IE
以外的其他浏览器不正常的情况, 所以无可分享. 只要代码规范, 相信这种情况的发生应该是很罕见 (JavaScript 除外).
2. 不同文件中处理.
为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器? 这是为了欺骗 W3C 的验证工具, 其实只需要两个文件,
一个是针对所有浏览器的, 一个只为 IE 服务. 将所有符合 W3C 的代码写到一个里面去, 而一些 IE 中必须的, 又不能通过 W3C
验证的代码 (如: cursor:hand;) 放到另一个文件中, 再用下面的方法导入.
1
2
3
4
5
6<!– 放置所有浏览器的样式 –>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<!– 只放置 IE 必须的, 而不能通过 W3C 的代码 –>
<!–[if IE]>
<link rel=”stylesheet” href=”style_ie.css” type=”text/css” />
<![endif]–> 浏览器的 CSS Hack 方法有很多, 比如 @import 引入, > 过滤等等方法, 但以上就是我用过的全部.
网页前台的兼容不应该仅限于对过去的浏览器支持 (向前兼容), 更应该对未来的浏览器服务 (向后兼容). 因为浏览器的发展很快, 而经常上网的人更新软件的频率是非常高的, 所以向后兼容的意义甚至比先前兼容还来得重要. 如何向后兼容呢? 只要符合标准你的网站就 永远不会过时 (IE 系列除外).所以我的宗旨是尽量做到标准, 不得已才 Hack, 并尽量使用比较简单的方法去解决.
CSS hack是指我们为了兼容各浏览器，而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表，显示了各浏览器对css hack的支持程度，对我们制作兼容网页非常有帮助。
补充：
.color{
background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/
*background-color: #0066FF; /*IE6、IE7会变为蓝色*/
_background-color: #009933; /*IE6会变为绿色*/
}
好多css hack，最重要的是简单实用能解决问题就行了
总结：
\9： IE6 IE7 IE8
*： IE6 IE7
_： IE6
*+： IE7（经我测试没多大用）
—————————————-
IE6，IE7，Firefox兼容的css hack
第一种办法：
body
{
background:red;
*background:blue !important;(经测试在IE里不使用)
*background: green;
}
第一排给Firefox以及其他浏览器看；
第二排给IE7,IE7既能识别*号，也能识别important；
第三排给IE6也能识别*号；
第二种办法，使用_来区分IE6：
body
{
background:red;
*background:blue;
_background: green;
}
第一排给Firefox以及其他浏览器看；
第二排给IE7,IE7既能能识别*号；
第三排给IE6能识别下划线；
CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。
常见兼容问题：
1.DOCTYPE 影响 CSS 处理(但这个声明对于WEB标准的验证是非常重要的)
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行(已经过时)
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width(IE也会增加，没用！)
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式（IE不会忽略！这谁写的没用的东西！）
6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给
a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。（这个没看懂！）
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;}（这方法不使用！没用！用*、-多好！）
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性 IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
10.IE5 和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不支持，如果有人理解的话，请告诉我一声，谢了！：）
11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}
就能解决大部分问题（不只这一个吧！还有P，DL 等。。）
注意事项：
1、float的div一定要 闭合。
例如：(其中floatA、floatB的属性已经设置为float:left;)
<#div id=”floatA” ></#div>
<#div id=”floatB” ></#div>
<#div id=”NOTfloatC” ></#div>
这里的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的时候，高度自动适应在IE6下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做 到，这样就达到了兼容。
例如某一个wrapper如下定义：
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2、margin加倍的问题。
设置为float的div在ie6下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：
<#div id=”imfloat”></#div>
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE6下理解为10px*/
display:inline;/*IE6下再理解为5px*/}
3、关于容器的包涵关系
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要 用Photoshop或者Firework量取像素级的精度。
4、关于高度的问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么 回事）
5、最狠的手段 – !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解 析,然而IE则会忽略.如下
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过
IE浏览器都能识别“*” “\9”;标准浏览器(如FF)不能识别“*”；
IE6能识别“_” “+” “#” “@”, 同一属性有两个的只看后者 无论有没有 如果是两句它就能识别“!important”;
IE7能识别“+” “#” “@” “!important”，不能识别“_”;
FF能识别“!important”，不能识别“_” “+” “#” “@”;
以上是我自己测试的结果，如有差错还请指出~！
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
例如：select{
Color：blue；//所有浏览器
Color：yellow\9；//所有IE浏览器
*Color：red；//forIE7
_color：green；//forIE6
}
关注过IE8的css hack的人相信大家都在使用这个hack，就是“\9”的css hack：
其中：OP表示Opera，SA表示Safari，Ch表示Chrome；当然你如果还有耐心可以测试 “\14”，“\15”，“\16”。。。
从上面测试结果我们可以看出“\0”的写法只被IE8识别，ie6，ie7都不能识别，那么“\0”应该是IE8的 真正hack。主流浏览器的CSS hack这样更好一些：
.test{
color:#000000; /* FF,OP支持 */
color:#0000FF\0; /* IE8支持*/
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
} 其中：OP表示Opera，SA表示Safari，Ch表示Chrome；
关注过IE8的css hack的人相信大家都在使用这个hack，就是“\9”的css hack：
.test{
color:#000000; /* FF,OP支持 */
color:#0000FF\9; /* 所有IE浏览器(ie6+)支持 ；但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}
color:#0000FF\9的hack支持IE6-IE8（其他版本没有测试），但是IE8不能识别“*”和 “_”的css hack，所以我们可以使用
color:#0000FF\9; ;/*ie6,ie7,ie8*/
*color:#FFFF00;/*ie7*/
_color:#FF0000;/*ie6*/
来区分IE的各个版本。
说到了这个\/* SF,CH支持 *\/经过本人测试，这个ie系列都支持，而且ff会把他解析为上下top和bottom，从而影响以上两个地方的位置。
