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

来源：互联网发布：java 日期加三个月编辑：程序博客网时间：2024/05/22 00:02

文章来源：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 */