CSS无难事-常用CSS hack写法和页面布局规范

写css hack，一般地是为了让页面模块在不同的浏览器下达到兼容显示的效果。如果你经常写Hack，说明你的html布局或者div书写有出现不合理的地方。与其一堆hack，你有必要看看你的html结构是否合理了哦。关于这三角恋的关系，如下图：

有时候也在所难免，类似于美莱氏其中的一个布局：

我们看这种瀑布流式的布局，模块之间存在边距，模块内也存在边距，div的布局设置，要从细微的地方考虑，就像搭棚架一样，好的基础，才能搭得高。这个页面小弟还无优化它，之前开源系统的前端写得一般。要知道搜索引起对页面的抓取，也是讲究div层布局是否合理的，好的层次结构有利于seo。

我们以margin-left为例，其他css属性是一样道理的。

.melace{

margin-left:10px; //让火狐，opera，chrome等firefox家族执行

margin-left:8px\9; //让ie6，ie7，ie8，ie9 执行，其他非ie家族不执行

*margin-left:5px; // 让ie6，ie7 执行；ie8, ie9不执行

_margin-left:3px; // 让ie6执行

}

1. 来分析一下，margin-left:10px; 本来ie家族也会执行，但是后边的声明会将其覆盖，就是说，像java一样，如果后边没有声明覆盖，那么ie家族会执行这个参数，现在后边的声明，就覆盖了这个参数，导致的结果是只有火狐家族执行margin-left:10px; 区分了两个阵型的浏览器识别。

2. margin-left:8px\9; 这个声明ie家族能识别，火狐家族不识别。就是用来覆盖

“ margin-left:10px; ”的。

3. *margin-left:5px; 用” * “ 星号声明，ie6和ie7执行这个参数，ie8和ie9不执行，导致的结果是：ie8和ie9 执行了margin-left:8px 。这样便将ie6、ie7 和ie8、ie9区分了。

4. _margin-left:3px; 只有ie6执行，这样便区分了ie6和ie7内核的浏览器了。

总结：这是典型的css hack 写法，目的是针对引用.melace这个伪类的div，在不同浏览器下边执行不同的参数值。一般点将，如果你经常写css hack，你应该去考虑一下html页面的结构是否合理，考虑一下是否应该要重构。如果你的html结构规范，div书写也比较规范，一般写css hack的机会就减小很多了，这样节约了维护成本。那么就涉及你的div展现层，html 结构层是否规范了，新手一般只求功能实现，很多情况下抱着能实现就好，或者赶进度给客户看，往往忽略了这两个层次的规范问题。当你写多了，就应该回头看看是否规范哦。

人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容，CSS HACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以方便维护。而解决兼

容的方法就是（必须是，因为这才最容易有问题的）其中一个最重要的、要解决的规范之一。

看看常见的CSS hack写法：

.soFun{

padding:10px; /* FF CH OP*/

[padding:10px; padding:8px];/* SF, CH (值取后者)*/

padding:9px\9; /* all ie */

padding:8px\0; /* ie8-9 */

*padding:5px; /* ie6-7 */

+padding:7px; /* ie7 */

_padding:6px; /* ie6 */

}

要注意上面中括号的写法，要写在“padding:10px; /* FF CH OP*/”的后面哦，否则苹果和google浏览器不起作用。

经济实惠型写法：

.sofish{

padding:10px;

[padding:10px; padding:8px]; /* SF, CH (值取后者)*/

padding:9px\9; /* all ie */

padding:8px\0; /* ie8-9 目前应用于IE8的单独hack，情况比较少*/

*padding:5px; /* ie6-7 */

+padding:7px; /* ie7 */

_padding:6px; /* ie6 */

}

/* webkit and opera */

@media all and (min-width: 0px){ .sofish{padding:11px;} }

/* webkit */

@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }

/* opera */

@media all and (-webkit-min-device-pixel-ratio:10000), not all and

(-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }

/* all firefox * /

@-moz-document url-prefix(){ .sofish{padding:11px;}}

/* newest firefox */

html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; }

Jquery判断浏览器为ie6

// 以jQuery为例，检测是否是IE6，是则加上class="ie6"

if ($.browser.msie && $.browser.version = 6 ){

$('div').addClass('ie6');

}

全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表

写法注释

html .soFun { color: red }IE6 and below

*:first-child+html .soFun { color: red } IE7

html>body .soFun { color: red }IE7, FF, Saf, Opera

IE8, FF, Saf, Opera

html>/**/body .soFun { color: red }

(Everything but IE 6,7)

Opera 9.27 and below, safari html:first-child .soFun { color: red }

2

html[xmlns*=""] body:last-child .soFun { color: red } Safari 2-3

safari 3+, chrome 1+, body:nth-of-type(1) .soFun{ color: red }

opera9+, ff 3.5+

safari 3+, chrome 1+, body:first-of-type .soFun { color: red }

opera9+, ff 3.5+

全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表

写法注释

@media screen and (-webkit-min-device-pixel-ratio:0) { .soFun

saf3+, chrome1+

{ color: red } }

@media screen and (max-device-width: 480px) { #veintiseis

iPhone / mobile webkit { color: red } }

html[xmlns*=""]:root #trece { color: red } Safari 2 - 3.1

|html[xmlns*=""] #catorce { color: red } Safari 2 - 3.1, Opera 9.25 root *> #quince { color: red }Everything but IE6-8

*+html #dieciocho { color: red } IE7

#veinticuatro, x:-moz-any-link { color: red } Firefox only. 1+

#veinticinco, x:-moz-any-link, x:default { color: red }Firefox 3.0+ *

#once { _color: blue } IE6

#doce { *color: blue; /* or #color: blue */ } IE6, IE7

#diecisiete { color/**/: blue } Everything but IE6

#diecinueve { color: blue\9; } IE6, IE7, IE8, IE9

#veinte { color/*\**/: blue\9; } IE7, IE8

IE6, IE7(ie6,7可以这样识#veintesiete { color: blue !ie; }

别)

!important;请勿随便使用这个标签, 因为不同的写法和环境, 现代非ie6的浏览器也是支持这个写法的, 不要轻信网上的说法. 这个标签在碰到ie6特有的某些环境下使用才比较划算. 在国内前端开发中，我们始终记住一点，那就不要单独为了表现而去写css及设计，而是要为数据和内容去css和design！最好这个东西还是作用在最小区域哦，否则会有莫名其妙的问题，比如ie6下的字体颜色没有用上，你可以在之后加一下这个东西哦。

转载请注明：智容中国https://www.360docs.net/doc/207299048.html, By JohnKong