css 兼容性写法,CSS hack写法
兼容总结
IE6识别 * 、_
IE7识别 * 、+
IE8识别 * 、\9,\0
只有IE8识别 \0/
ie9只识别：\9
！import ie6不识别，ie7以上都识别。ie7只识别没有优先级，ie7以上都识别优先级
eg:
margin-bottom:40px; /*ff的属性*/
margin-bottom:140px\9; /* IE6/7/8的属性 */
color:red\0; /* IE8支持 */
*margin-bottom:450px; /*IE6/7的属性*/ +margin-bottom:450px;
_color:#ff0000; /* 只ie6支持 */
#1 { color: #333; } /* FF环境 */
* html #1 { color: #666; } /* IE6环境 */
*+html #1 { color: #999; } /* IE7环境 */
================================================================================
一、CSS hack写法
书写顺序为FireFox在最前，其次是IE8、IE7，最后是IE6。
color:red;//所有浏览器
color:blue\9;//所有IE
+color:orange;//IE7
_color:green;//IE6
eg1. 若浏览器为FireFox，那么color:red；若浏览器为IE8，根据CSS优先性原则，color:blue；若为IE7，color:orange；若为IE6，则color:green。
IE6识别 * 、_
IE7识别 * 、+
IE8识别 * 、\9,\0
只有IE8识别 \0/
ie9只识别：\9
FF什么都不识别
eg2.
- .test{
- color:#09F\0; /* IE8/9 */
- color:#09F\0/; /* IE8 only */
- }
- :root .test { color:#963\9; } /* IE9 only */
- /*或者下面的，但是下面的优先级小于上面的。Ps:老外的方法都是\0，根本没考虑Opera*/
- @media all and (min-width:0){
- .test{color:red\9; }/* IE9 only */
- }
eg3. 解决火狐和iepadding 值引起的宽度bug
<html>
<body>
<div style="border: 1px solid red; width: 300px; padding: 10px;">
在Firefox中，div的完整宽度是padding+width，因此width: 300px; padding: 10px;的实际宽度是320px;而在IE6中，div的完整宽度是width，所以
这个div和下面的div宽度一致。
</div>
<div style="border: 1px solid red; width: 300px;">
宽度为300px的div
</div>
<div style="border: 1px solid red; width: 280px !important; width: 300px; padding: 10px;">
通过借助!important标记，可以设置Firefox中的width值为IE6中的width值减去padding值，这样就实现了Firefox与IE6的padding效果尺寸兼容。
</div>
</body>
</html>
DOCTYPE标准firfox与ie6 padding的问题
首先我们说说firefox和IE对CSS的宽度显示有什么不同：
其实CSS ’width’ 指的是标准CSS中所指的width的宽度，在firefox中的宽度就是这个宽度。它只包含容器中内容的宽度。而Internet Explorer ’width’
则是指整个容器的宽度，包括内容，padding ，border。
Firefox中：容器占的宽度=内容宽度+padding宽度+border宽度
IE中：内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度
所以，如果IE中定义 width:120px;padding:5px 的话，所显示的宽度就是120px.
即padding:5px是在width里面。
而Firefox中，上面这个定义，显示宽度就是 125 px;
所以，我们就必须这样定义
width:115px !important;width:120px;padding:5px;
必须注意的是， !important; 一定要在前面。
除了在不同的浏览器上会有这个问题，还有可能是在编码时引用了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
这个头，他在ie浏览器下要支持w3标准，w3的padding和firfox标准相同，所以也会出现上面的情况
eg3.1important的妙用解决firefox和ie的css兼容问题
.div_class{
min-height:30px;
height:auto !important;
height:30px;
}
第一行设置 min-height:30px;对Firefox有效；第二行height:auto !important;也对Firefox有效，后面紧跟的“!important”是Firefox专用的一个标记，带有这个标记的设置具有最高优先 级，之后的设置都无效。所以第三行的height:30px对Firefox无效了；同时，由于IE无法识别min-height和“! important”，所以只有第三行有效，由于IE默认就是高度自适应的，所以即使设置了30px的高度，只要内容很多，也会自动撑开，不需要设置 height:auto。最后，上述代码产生如下效果：
对于Firefox，等同于:
.div_class{
min-height:30px;
height:auto;
}
对于IE，等同于：
复制代码
.div_class{
height:30px;
}
.div_name {
width:100px;
padding:10px;
}
在IE里面，层的宽度是100px，四周的余空为10px；但是对于Firefox，层的宽度变成了100px+10px+10px=120px，对于宽度敏感的设计来说，整个就混乱了。怎么办呢？还是求助于“!important”吧。只要这样写就可以了：
复制代码
.div_name {
width:80px !important;
width:100px;
padding:10px;
}
因为80+10+10=100。正好让宽度 变成100px。
有时候，我们给一个层加上边框 ，在Firefox里面也会出现宽度增加的情况，比如：
.div_name {
width:100px;
padding:10px;
border:2px solid #ccc;
}
上面这个层，在Firefox里面的实际宽度等于100+10+10+2+2=124px，因为边框也会增加宽度。怎么办呢，还是靠“!important”，这样写就可以了：
复制代码
.div_name {
width:76px !important;
width:100px;
padding:10px;
border:2px solid #ccc;
}
=====================================================================================
二 、网站如何同时兼容IE6、IE7、IE8
第一招：给常用CSS规定属性值。
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}
img{border:0px;}
ul {margin:0px;padding:0px;}/
ul li {list-style:none;}
上面的建站常用代码就相是格式化CSS样式，让各浏览器按照我们设置的属性值渲染网页
第二招：IE和FF下对象居中问题
IE下大家应该知道只要设置body{text-align:center;}这样就可以居中显示。
但是这样的方法在FF不行的。这里就需要给修改成body:{text-align:center;margin:0px auto;}Margin的意思就是上下距离为0像素，左右为自动。所以FF就会居
中显示。
第三招：垂直居中（仅只用于一行）
比如说一个高30px的div，问题默认是会显示在左上角，如果想垂直居中对其可以加个line-height:30px;样式。如果你想让他居下方则在修改line-height:30px;
数值越大越局下，为了防止撑破层，还需要再给一个样式overflow:hidden;(超出的部分不显示)
第四招：给每一个块对象设置三个样式
width:**px;height:**px;overflow:hidden;即便高、宽是属性值是自动那么也需要去设置这三个样式。目的就是解决浏览器默认值的问题。
第五招：针对IE6、IE7、FF的css样式(这一招在特殊情况下经常用到)
原来建设网站经常使用!important来设置优先权，但有了IE7之后就不行了。下面给大家个可以解决IE6、IE7、FF各个CSS优先权的方法
#1 { color: #333; } /* FF环境 */
* html #1 { color: #666; } /* IE6环境 */
*+html #1 { color: #999; } /* IE7环境 */
上面的书写顺序一定不能去改变。
这样子网页在FF下显示#333，IE6下显示#666，IE7下显示#999;
========================
IE、Firefox对CSS中important和“*”和“_”的支持
1、IE6、IE7都支持 *，但IE8终于回归正统，放弃了对*的支持
2、IE7、IE8、Firefox、Opera、Safari都支持 important
eg.顾名，important的优先级要高. 举例说明：
<style type="text/css">
body
{
background-color:#FF0000 !important;
*background-color:#00FF00 !important;
*background-color:#0000FF;
background-color:#000000;
}
</style>
IE6选择最后一个，即：background-color:#000000; （因为IE6对important不感冒）
IE7选择第二个，即：background-color:#0000FF;（因为IE7开始对important感冒了，同时还死守着它对 * 感情的最后一版本，但important并未起到优先级的作用） 即ie7识别import 但是import不起优先级作用。
IE8和Firefox、Opera、Safari选择第一个，即：background-color:#FF0000 !important;（IE8完全感冒于important，同时丢弃了对*的感情）即ie7识别import 但是import不起优先级作用。
==================================================================
其他兼容技巧
- 关于手形光标. cursor: pointer. 而hand 只适用于 IE.
- css布局中的居中问题
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; 就可以了。
3. IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
4. 清除浮动
.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，
所以并不影响到IE/WIN浏览器。#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
5. 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>
6.各种浏览器使用内核
各种常见浏览器使用的内核 (Rendering Engine)
Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Konqueror ( KHTML )
Safari Swift ( WebKit )
用css自动隐藏超出宽度内容并省略显示，浏览器兼容ie、ff
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
- 顶
