css：常用CSS书写技巧和CSS HACK技巧

文章来源：http://www.cnblogs.com/pittzh/archive/2009/07/23/1529769.html

                  http://blog.csdn.net/jinchun20100615/article/details/9331593
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

比如 IE6能识别下划线“_”和星号“ * ”，IE7能识别星号“ * ”，但不能识别下划线“_”，而firefox两个都不能认识。等等

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。

常用CSS书写技巧和CSS HACK技巧

1：!important
!important作用是提高指定样式规则的应用优先权。
IE7以及所有标准浏览器能识别!important
火狐浏览器识别，谷歌浏览器识别，IE7+（IE7、IE8、IE9、IE10）识别，但是IE6无法识别。
注：IE7 不但能识别 * 符号，还能识别 !important，而 IE6 只能识别*符号
区别IE6与IE7与其他浏览器
border:20px solid #60A179 !important;       //在Mozilla中或者IE7浏览时候，能够理解!important的优先级，因此显示#60A179的颜色
border:20px solid #00F;     //在IE6中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色

2：*
IE都能识别*；标准浏览器（如火狐）不能识别*

border:20px solid #60A179;
*border:20px solid #00F;    //IE能识别，标准浏览器（如火狐）不能识别
*border:20px solid #00F !important;      //在IE6中浏览时候，不能够理解!important的优先级

.box{ color:red; *color:blue;}      //在 Firefox 等非 IE 核心浏览器中，文字呈现红色；而 IE 中呈现蓝色。

3：_
border:20px solid #60A179;
*border:20px solid #00F;
_border:20px solid ###;     // IE6支持下划线_，IE7和firefox均不支持下划线

/*不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面*/

4：*+html 与 *html
*+html 与 *html 是IE特有的标签， firefox 暂不支持。而*+html 又为 IE7特有标签
*html 只有IE6浏览器能识别，*+html只有IE7浏览器能识别，两者Firefox 等非 IE 核心浏览器不能识别，IE8+等IE核心浏览器也不能识别。

.browserTest { width: 120px; }      // FireFox 支持
*html .browserTest { width: 80px;}  // ie6 支持
*+html .browserTest { width: 60px;} // ie7 支持
*html .box{color:#00F;}     // IE6浏览器
*+html .box{color:#0F0;}    // IE7浏览器

注意：*+html 对IE7的HACK 必须保证HTML顶部有如下声明
<!DOCT>E HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

5：\9
IE8以下浏览器IE版浏览器都支持，火狐和chrom浏览器不支持。
/*火狐和谷歌为蓝色；IE8为红色；IE7为绿色；IE6为粉色；*/
.box {
height: 100px;
width: 100px;
color:#00F;
color:#F00\9;
*color:#0F0;
_color:#F0F;
border:1px solid #000;
}

6：\0
IE8以上浏览器识别，但是IE6、7不能识别。
.box{
background-color:red\0;         // ie 8/9 浏览器
background-color:blue\9\0;       // ie 9 浏览器
*background-color:#dddd00;      // ie 7 浏览器
_background-color:#CDCDCD;      // ie 6 浏览器
}
注：\9\0只有IE9 能识别

/*****************************************************************************/
另一种方式的CSS Hack写法：

1：@media all and (min-width:0) {}
浏览器Chrome, Safari, Firefox能识别，此法用于区别IE浏览器和其他浏览器。
html：
<div class="box">content</div>
css：
.box{width:100px; height:100px; border:1px solid #000;}

@media all and (min-width:0) {      /* Chrome, Safari, Firefox */
.box{
background:#F00;        // 红色
}
}            /*火狐、谷歌、苹果浏览器背景色为红色，IE浏览器无背景色；此法用于区别IE浏览器和其他浏览器。*/

2：@media screen and (-webkit-min-device-pixel-ratio:0) { }
浏览器 chrome和safari浏览器能识别，此法用于区别IE、火狐与chrome、safari浏览器。
@media screen and (-webkit-min-device-pixel-ratio:0) {      /* Chrome, Safari */
.box{
background: #0F0;       //绿色
}
}            /*谷歌和苹果浏览器背景色为绿色，IE浏览器背景色为无，火狐为红色，此法用于区别IE、火狐与chrom、safari浏览器*/

3：:root .box {}
只有IE9 浏览器能识别。
:root .box {        /* IE9 only */
background: #00F;   //蓝色
}

/*****************************************************************************/
一些常用的CSS兼容技巧：

1）火狐下给div设置padding后会导致width和height 增加， 但IE不会。（可用！important解决）
2）垂直居中，将 line-height设置为当前div相同的高度， 再通过vertical-align:middle；（ 注意内容不要换行）
3）水平居中，margin:0 auto;（当然不是万能）
4）若需给a标签内内容加上样式， 需要设置 displa> block;（常见于导航标签）

5）浮动IE产生的双倍距离，在IE下，当一个div设置了float后，然后给他设置margin，就会出现加倍的margin，解决的办法是给div设置displa>inline。
html：
<div id=”float”></div>
css：
#float
{
float:left;
margin:px;     //IE下理解为10px
displa>inline;     //IE下再理解为px
}
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:"10px";
}
则box在IE的宽度应该为：310
而在FF的宽度则是300
所以在box有填充的情况下应该这样使用
box{
width:"300" !important;
width:"290";
padding:"10px";
}

7）ul标签在FF下面默认有list-st>e和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加上
html：
<div id="wrap">
<div class="column_left">
<h1>Float left</h1>
</div>
<div class="column_right">
<h1>Float right</h1>
</div>
</div>
css：
#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;
}
/* 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 */