CSS hack常用方案（摘选）

最新推荐文章于 2021-12-04 01:41:07 发布

baicong1883

最新推荐文章于 2021-12-04 01:41:07 发布

阅读量192

点赞数

文章标签： xhtml 操作系统人工智能

原文链接：http://www.cnblogs.com/Janejxt/p/5807406.html

版权

邮箱因为默认了line-height?：170%,导致采用table元素时继承问题，可以采用line-height：50% 很好解决。

常在使用float时，后面的显示不正常，因为继承了float了，可以采用clear来实现正常，当采用了display：inline-block实现块与块之间连接后，由于ie6不正常，可以采用margin移动到目标实现，很多时候，input，hx，p在浏览器中总是不在正中间可以采用line- height高度和height高度一致实现。实现居中最常用的方法就是：margin：xpx auto;padding:0px;width:xpx;vertical-text:middle;实现。

除了下面提到的css hack方法，有时也可以采用:

style_name{

}//通用

*+html style_name{

}?//IE7

*html style_name{

}?//IE6

顺序一定要用按照这种顺序。

---（kiven 总结一些css的一些方法）

把CSS BUG 编成了顺口溜 :

一、IE 边框若显若无，须注意，定是高度设置已忘记；

二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；

三、三像素文本慢移不必慌，高度设置帮你忙；

四、兼容各个浏览须注意，默认设置行高可能是杀手；

五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；

六、学布局须思路，路随布局原理自然直，轻松驾驭html ，流水布局少 hack ，代码清爽，兼容好，友好引擎喜欢迎。

七、所有标签皆有源，只是默认各不同，span 是无极，无极生两仪 — 内联和块级， img 较特殊，但也遵法理，其他只是改造各不同，一个 * 号全归原，层叠样式理须多练习，万物皆规律。

八、图片链接排版须小心，图片链接文字链接若对齐，padding 和 vertical-align:middle 要设定，虽差微细倒无妨。

九、IE 浮动双边距，请用 display ： inline 拘。

十、列表横向排版，列表代码须紧靠，空隙自消须铭记。

什么是CSS hack ？

　　由于不同的浏览器对CSS 的解析认识不一样，因此会导致生成的页面效果不一样 .

这个时候我们就需要针对不同的浏览器去写不同的CSS ，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
　　这个针对不同的浏览器写不同的CSS code 的过程，就叫 CSS hack, 也叫写CSS hack 。
　　CSS Hack 的原理是什么
　　由于不同的浏览器对CSS 的支持及解析结果不一样，还由于 CSS 中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的 CSS 。
　　比如 IE6 能识别下划线 "_" 和星号 " * " ， IE7 能识别星号 " * " ，但不能识别下划线 "_" ，而 firefox 两个都不能认识。等等
　　书写顺序，一般是将识别能力强的浏览器的CSS 写在后面。下面如何写里面说得更详细些。
　　如何写CSS Hack
　　比如要分辨IE6 和 firefox 两种浏览器，可以这样写：
　　<style>
　　div{
　　background:green; /* for firefox */
　　*background:red; /* for IE6 */
　　}
　　</style>
IE6中看到是红色的，在 firefox 中看到是绿色的。

中文字体在CSS 中的表达方式

在 CSS 中写入中文字体的方法一般采用 font-family:" 微软雅黑 "," 黑体 "; 这样类似的表达方式，但是对于像 WordPress 这样需要 UTF8 编码平台来说，一个不注意没有转换编码就会导致中文字体无法按照希望的字体表形出来。所以我们可以通过英文、 unicode 这种形式来表达中文，比如说刚才的 font-family:" 微软雅黑 "," 黑体 "; 就可以写成 font-family:"Microsoft Yahei","SimHei"; 这样看起来是不是也可以统一一点呢。

中文字体与英文、unicode 对应列表：

中文名	英文名	Unicode
Mac OS
华文细黑	STHeiti Light [STXihei]	\534E\6587\7EC6\9ED1
华文黑体	STHeiti	\534E\6587\9ED1\4F53
华文楷体	STKaiti	\534E\6587\6977\4F53
华文宋体	STSong	\534E\6587\5B8B\4F53
华文仿宋	STFangsong	\534E\6587\4EFF\5B8B
丽黑 Pro	LiHei Pro Medium	\4E3D\9ED1 Pro
丽宋 Pro	LiSong Pro Light	\4E3D\5B8B Pro
标楷体	BiauKai	\6807\6977\4F53
苹果丽中黑	Apple LiGothic Medium	\82F9\679C\4E3D\4E2D\9ED1
苹果丽细宋	Apple LiSung Light	\82F9\679C\4E3D\7EC6\5B8B
Windows
新细明体	PMingLiU	\65B0\7EC6\660E\4F53
细明体	MingLiU	\7EC6\660E\4F53
标楷体	DFKai-SB	\6807\6977\4F53
黑体	SimHei	\9ED1\4F53
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
仿宋	FangSong	\4EFF\5B8B
楷体	KaiTi	\6977\4F53
仿宋_GB2312	FangSong_GB2312	\4EFF\5B8B_GB2312
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
微软正黑体	Microsoft JhengHei	\5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
Office
隶书	LiSu	\96B6\4E66
幼圆	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
华文楷体	STKaiti	\534E\6587\6977\4F53
华文宋体	STSong	\534E\6587\5B8B\4F53
华文中宋	STZhongsong	\534E\6587\4E2D\5B8B
华文仿宋	STFangsong	\534E\6587\4EFF\5B8B
方正舒体	FZShuTi	\65B9\6B63\8212\4F53
方正姚体	FZYaoti	\65B9\6B63\59DA\4F53
华文彩云	STCaiyun	\534E\6587\5F69\4E91
华文琥珀	STHupo	\534E\6587\7425\73C0
华文隶书	STLiti	\534E\6587\96B6\4E66
华文行楷	STXingkai	\534E\6587\884C\6977
华文新魏	STXinwei	\534E\6587\65B0\9B4F

因为 Firefox 居然不支持以上别名，对它来说 "Microsoft Yahei" 并不是微软雅黑，只能反馈出浏览器默认字体的的结果 .

全面兼容IE6/IE7/IE8/FF 的 CSS HACK写法

设计的页面兼容

第一种方法：

把这段代码放到<head> 里面，在 ie8 里面的页面解析起来就跟 ie7 一模一样的了，所以，基本上可以无视 ie8 ，剩下的代码只需要这样写就可以了

background:#ffc; /*  对 firefox 有效 */
*background:#ccc; /* 对 ie7 有效  */
_background:#000; /* 只对 ie6 有效  */

解释：

IE6能识别下划线 "_" 和星号 " * " ， IE7 能识别星号 " * " ，但不能识别下划线 "_"，而 firefox 两个都不能认识。

ps：如果你发现按我这样写还是有问题的话，请查看一下你的 html 头，看看<head> 之前的内容是不是这样的标准写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

这个是现在比较规范的写法，如果你是用dreamweaver 做页面的话，默认也是这种规范的，切记，非这种规范写法的，兼容性不能保证

第二种方法：

要求苛刻的朋友是不愿意在页面头部增加<meta http-equiv="x-ua-compatible" content="ie=7" /> 这样一句代码的，因为这样的结果是每个页面都得加。那么要想兼容这几个浏览器还真得想别的办法了。早些天本站发布了一篇《完美兼容ie6,ie7,ie8 以及 firefox 的 css 透明滤镜》，可能当时测试的疏忽，IE8 的兼容性没有解决好，好多朋友回复说用不了。

以下是兼容IE6/IE7/IE8/FF 的写法，注意下面的顺序不可颠倒

margin-bottom:40px;       /*ff的属性 */
margin-bottom:140px\9;    /* IE6/7/8的属性  */
color:red\0;              /* IE8支持  */
*margin-bottom:450px;     /*IE6/7的属性 */

下面以一个实例的形式表现，大家可以运行代码查看一下效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>2010最新全面兼容 ie6,ie7,ie8,ff 的 CSS HACK 写法 ——www.aa25.cn 标准之路 </title>

#abc {

border:2px solid #00f; /*ff的属性 */

border:2px solid #090\9; /* IE6/7/8的属性 */

border:2px solid #F90\0; /* IE8支持 */

_border:2px solid #f00; /*IE6的属性 */

}

/*上下顺序不可以写错 */

</style>

</head>

<body>

<ul>

<li>FF下蓝边 </li>

<li>转载请注明来源标准之路<a href="http://www.68css.com">www.68css.com</a></li>

</ul>

</div>

</body>

</html>

高效整洁CSS 代码原则 ( 上 )

为此总结了一些如何实现高效整洁的CSS 代码原则：

1. 使用 Reset 但并非全局 Reset

不同浏览器元素的默认属性有所不同，使用Reset 可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局 Reset ：

*{ margin:0; padding:0; }

这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset 和 Eric Meyer 的做法。

/** 清除内外边距  **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素  */
dl, dt, dd, ul, ol, li, /* list elements 列表元素  */
pre, /* text formatting elements 文本格式元素  */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素  */
th, td, /* table elements 表格元素  */
img/* img elements 图片元素  */{
border:medium none;
margin: 0;
padding: 0;
}
/** 设置默认字体  **/
body,button, input, select, textarea {
font: 12px/1.5 '宋体 ',tahoma, Srial, helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素  **/
ul, ol { list-style: none; }
/** 重置超链接元素  **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置图片元素  **/
img{ border:0px;}
/** 重置表格元素  **/
table { border-collapse: collapse; border-spacing: 0; }

2. 良好的命名习惯

无疑乱七八糟或者无语义命名的代码，谁看了都会抓狂。就像这样的代码：

.aaabb{margin:2px;color:red;}

我想即使是初学者，也不至于会在实际项目中如此命名一个class ，但有没有想过这样的代码同样是很有问题的：

问题在于如果你需要把所有原本红色的字体改成蓝色，那修改后就样式就会变成：

.red{color:bule;}

这样的命名就会很让人费解，同样的命名为.leftBar 的侧边栏如果需要修改成右侧边栏也会很麻烦。所以，请不要使用元素的特性（颜色，位置，大小等）来命名一个 class 或 id ，您可以选择意义的命名如： #navigation{...} ， .sidebar{...} ，.postwrap{...}

这样，无论你如何修改定义这些class 或 id 的样式，都不影响它跟 HTML 元素间的联系。

另外还有一种情况，一些固定的样式，定义后就不会修改的了，那你命名时就不用担忧刚刚说的那种情况，如

.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}

那么对于这样一个段落

<p class="alignleft">我是一个段落！ </p>

如果需要把这个段落由原先的左对齐修改为右对齐，那么只需要修改它的className就为 alignright 就可以了。

3. 代码缩写

CSS代码缩写可以提高你写代码的速度，精简你的代码量。在 CSS 里面有不少可以缩写的属性，包括 margin ， padding ， border ， font ， background 和颜色值等，如果您学会了代码缩写，原本这样的代码：

li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}

就可以缩写为：

li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}

4. 利用 CSS 继承

如果页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些CSS 样式。这样你可以很好的维护你的代码，并且还可以减少代码量。那么本来这样的代码：

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

就可以简写成：

#container{ font-family:Georgia, serif; }

5. 使用多重选择器

你可以合并多个CSS 选择器为一个，如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如：

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

可以合并为:

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. 适当的代码注释

代码注释可以让别人更容易读懂你的代码，且合理的组织代码注释，可使得结构更加清晰。你可以选择做的样式表的开始添加目录:

/*------------------------------------
1. Reset
2. Header
3. Content
4. SideBar
5. Footer
----------------------------------- */

如此你代码的结构就一目了然，你可以容易的查找和修改代码。

而对于代码的主内容，也应适当的加以划分，甚至在有必要的地方在对代码加以注释说明，这样也有利于团队开发:

/*** Header ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}

/*** Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* 设置字体颜色 */
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/*** Footer ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

7. 给你的 CSS 代码排序

如果代码中的属性都能按照字母排序，那查找修改的时候就能更加快速:

/*** 样式属性按字母排序 ***/
div{

color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}

8. 保持 CSS 的可读性

书写可读的CSS 将会使得更容易查找和修改样式。对于以下两种情况，哪种可读性更高，我想不言而明。

/*** 每个样式属性写一行  ***/
div{

color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}

/*** 所有的样式属性写在同一行  ***/
div{  color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

当对于一些样式属性较少的选择器，我会写到一行：

/*** 选择器属性少的写在同一行 ***/
div{ color:#666;}

对于这个规则并非硬性规定，但无论您采用哪种写法，我的建议是始终保持代码一致。属性多的分行写，属性少于3 个可以写一行。

9. 选择更优的样式属性值

CSS中有些属性采用不同的属性值，虽然达到的效果差不多，当性能上却存在着差异，如

区别在于border:0 把 border 设为 0px ，虽然在页面上看不见，但按 border 默认值理解，浏览器依然对 border-width/border-color 进行了渲染，即已经占用了内存值。
而border:none 把 border 设为 "none" 即没有，浏览器解析 "none" 时将不作出渲染动作，即不会消耗内存值。所以建议使用 border:none;

同样的，display:none 隐藏对象浏览器不作渲染，不占用内存。而 visibility:hidden则会。

10. 使用 <link> 代替 @import

首先，@import 不属于 XHTML 标签，也不是 Web 标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。

11. 使用外部样式表

这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS 文件都能在浏览器中产生缓存。内置在HTML 文档中的 CSS 则会在每次请求中随 HTML 文档重新下载。所以，在实际应用中，没有必要把 CSS 代码内置在 HTML 文档中：

而是使用<link> 导入外部样式表：<link rel="stylesheet" type="text/css" href="http://blog.163.com/pcttcnc2007@126/blog/css/styles.css" />

12. 避免使用 CSS 表达式（ Expression ）

CSS表达式是动态设置 CSS 属性的强大（但危险）方法。 Internet Explorer 从第 5个版本开始支持 CSS 表达式。下面的例子中，使用 CSS 表达式可以实现隔一个小时切换一次背景颜色：

expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示，expression 中使用了 JavaScript 表达式。 CSS 属性根据 JavaScript 表达式的计算结果来设置。

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS 表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000 次以上的计算量。

如果必须使用CSS 表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以，在非不得已，请避免使用 CSS 表达式。

13. 代码压缩

当你决定把网站项目部署到网络上，那你就要考虑对CSS 进行压缩，出去注释和空格，以使得网页加载得更快。压缩您的代码，可以采用一些工具，如YUI Compressor ，利用它可精简 CSS 代码，减少文件大小，以获得更高的加载速度。

DIV+CSS的优势何在？

1：表现和内容相分离
将设计部分剥离出来放在一个独立样式文件中，HTML 文件中只存放文本信息。符合 W3C 标准，微软等公司均为 W3C 支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
2：提高搜索引擎对网页的索引效率
用只包含结构化内容的HTML 代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。
3：代码简洁，提高页面浏览速度
对于同一个页面视觉效果，采用CSS+DIV 重构的页面容量要比 TABLE 编码的页面文件容量小得多，代码更加简洁，前者一般只有后者的 1/2 大小。对于一个大型网站来说，可以节省大量带宽。并且支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是 IE7 或者是火狐，您的网站都能很好的兼容。
4：易于维护和改版
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。你只要简单的修改几个CSS 文件就可以重新设计整个网站的页面。现在YAHOO,MSN 等国际门户网站，网易，新浪等国内门户网站，和主流的 WEB2.0网站，均采用 DIV+CSS 的框架模式，更加印证了 DIV+CSS 是大势所趋。

css hack 区分 ie6.0 ie7.0 firesox 的各种写法注：IE 都能识别 * ;标准浏览器 ( 如 FF )不能识别 * ；

IE6 能识别 * ，但不能识别 !important ,

IE7 能识别 * ，也能识别 !important ;

FF 不能识别 * ，但能识别 !important ;

IE6 支持下划线， IE7 和 firefox 均不支持下划线。

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

可以区分 IE6 ， IE7 ， firefox :

1、 background:orange; * background:green; _ background:blue;

2、 background:orange; * background:green !important ; * background:blue;

CSS Hack 汇总快查

屏蔽IE 浏览器（也就是 IE 下不显示）

*:lang(zh) select { font:12px !important;} /*FF, OP 可见，特别提醒：由于Opera 最近的升级，目前此句只为 FF 所识别 */
select :empty { font:12px !important;} /*safari可见 */
这里select 是选择符，根据情况更换。第二句是 MAC 上 safari 浏览器独有的。

仅IE7 与 IE5.0 可以识别

*+html select { … }
当面临需要只针对IE7 与 IE5.0 做样式的时候就可以采用这个 HACK 。

仅IE7 可以识别

*+html select { …!important; }
当面临需要只针对IE7 做样式的时候就可以采用这个 HACK 。

IE6及 IE6 以下识别

* html select { … }
这个地方要特别注意很多博客都写成了是IE6 的 HACK 其实 IE5.x 同样可以识别这个 HACK 。其它浏览器不识别。
html/**/ >body select { … }
这句与上一句的作用相同。

仅IE6 不识别，屏蔽 IE6

select { display /*屏蔽 IE6*/: none ;}
这里主要是通过CSS 注释分开一个属性与值，注释在冒号前。

仅IE6 与 IE5 不识别，屏蔽 IE6 与 IE5

select /**/ { display /*IE6,IE5不识别 */ :none ;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS 注释。不屏蔽IE5.5

仅IE5 不识别，屏蔽 IE5

select /*IE5不识别 */ { … }
这一句是在上一句中去掉了属性区的注释。只有IE5 不识别， IE5.5 可以识别。

盒模型解决方法

selct { width:IE5.x宽度 ; voice-family :"\"}\""; voice-family:inherit; width:正确宽度 ; }
盒模型的清除方法不是通过!important 来处理的。这点要明确。

清除浮动

select :after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox 中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的 HACK 来对父级做一次定义，那么就可以解决这个问题。

截字省略号

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox 并不支持。

只有Opera 识别

@media all and (min-width: 0px){ select {……} }
针对Opera 浏览器做单独的设定。

以上都是写CSS 中的一些 HACK ，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS 中通过过滤器导入特别的样式，也有的是写在 HTML 中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器，只有 IE5.x 可见

@media tty {
i{content:"\";/*" "*/}} @import '' ie5win.css ''; /*";}
}/* */

IE5/MAC的过滤器，一般用不着

/*\*//*/
@import " ie5mac.css ";
/**/

IE的 if 条件 Hack

Only IE
所有的IE 可识别

只有IE5.0 可以识别
Only IE 5.0+
IE5.0包换 IE5.5 都可以识别

仅IE6 可识别
Only IE 6/+
IE6以及 IE6 以下的 IE5.x 都可识别
Only IE 7/-
仅IE7 可识别

以上内容可能并不全面，欢迎大家能和我一起把这些技巧都汇总起来，为以后工作的查询提供一个方便，同时在这里感谢那些研究出这些HACK 的作者们。

web2.0中流行的设计元素：颜色

颜色的变化跟人类的智慧一样, 是无穷的 , 每个阶段都会有流行的色彩 , 有属于一个时代的颜色 !WEB2.0 是一个概念 , 它宣扬 , 定位了一些东西 , 以用户为中心 ,群体智慧 , 分享等等 , 等等 . 同时顺应这些需求 , 一些顶尖的设计师和开发者赋予并领导了一些色彩流行趋势 . 我凭感觉做了部分归纳和收集 , 心理没大有底 , 把能想到的列出来希望跟大家一起探讨 >> 再做补充吧 !

★淡淡的浅色系及延伸应用

蓝：背景#E8F5FE 　边框 #A9C9E2

黄：背景#FFFFDD 　边框 #E9DC8E

绿：背景#F2FDDB 　边框 #A5CF3D

粉：背景#FFE7F4 　边框 #F9B3D5

灰：背景#F7F7F7 　边框 #D5D5D5

此类颜色似乎最早被应用在一些文档处理软件比如word, 和操作系统里 ( 比如MacOSX) 用于分类归档 , 标记 , 或者突出显示使用 . 此类颜色给人的感觉很环保 ,不伤眼睛 , 而且对比度恰到好处 , 既可以有效区分 , 又不会显的太过突兀 .
google,Yahoo更为成熟的运用了这些颜色 .MSN 在新版网站中也设置了Simple White 主题选择 , 并且新的 LIVE 系列产品更是对那种淡淡的兰色与 1PX 线条情有独忠 ~ 另外一些新兴的 WEB-base 办公软件也大量选用了此类颜色 ! 事实证明 , 这些颜色的运用取得了大部分用户的认可并领导了趋势 !
例子：GMail,yahoo360,live.com,start.com,netvibes,rember the milk

★柔软舒适的过度色

此类颜色不知道跟WEB 标准的流行有没有关 , 包括一些优秀的 CSS 陈列馆网站 ,还有著名的 simplebit 的设计作品 , 都大量运用了这种柔软的过度色 , 包括 blog的一些优秀 THEME 也会经常看到 . 这让人想到苹果水晶效果的转变 , 从最新的TIGER 系统中我们可以发现 , 苹果在逐渐弱化那种清澈通明的水晶和金属拉丝效果, 而向更直观硬朗的过度色做转变 ! 说白了就是越来越 simple 而不是玩那么多花样 .

background-attachment -- 定义背景图片随滚动轴的移动方式

· 取值: scroll | fixed | inherit

· scroll: 随着页面的滚动轴背景图片将移动

· fixed: 随着页面的滚动轴背景图片不会移动

· inherit: 继承

· 引用网址:http://www.dreamdu.com/css/property_background-attachment/

· 初始值: scroll

· 继承性: 否

· 适用于: 所有元素

· background:背景 .attachment: 附着 .

如何让position:fixed 在 IE6 中工作的

众所周知IE6 不支持 position:fixed ，这个 bug 与 IE6 的双倍 margin 和不支持 PNG透明等 bug 一样臭名昭著。前些天我做自己的博客模板的时候，遇到了这个问题。当时就简单的无视了 IE6—— 尽管有几个使用 IE6 的朋友，一起 BS 我 ……但是对于大项目或商业网站，如果有用到这个属性的时候，是不可能直接无视的。

你是如何让position:fixed 在 IE6 中工作的？

本文所使用的技巧是用了一条Internet Explorer 的 CSS 表达式 (expression) 。你不可以直接使用该表达式，因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用 eval 包裹你的语句。

如何解决“ 振动 ” 的问题？

显然IE 有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重画页面，这个时候它就会重新处理 css 表达式。这会引起一个丑陋的 “ 振动 ”bug ，在此处固定位置的元素需要调整以跟上你的 ( 页面的 ) 滚动，于是就会 “ 跳动 ” 。

解决此问题的技巧就是使用 background-attachment:fixed 为body 或 html 元素添加一个 background-image 。这就会强制页面在重画之前先处理 CSS 。因为是在重画之前处理 CSS ，它也就会同样在重画之前首先处理你的 CSS 表达式。这将让你实现完美的平滑的固定位置元素！

我发现的另外一个小技巧是，你根本无需一个真实的图片！你可以使用一个about:blank 替代一个spacer.gif 图片，而且它工作的同样出色。

/*让 position:fixed 在 IE6 下可用 ! */

.fixed-top /* 头部固定  */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* 底部固定  */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* 左侧固定  */{position:fixed;right:auto;left:0px;}
.fixed-right /* 右侧固定  */{position:fixed;right:0px;left:auto;}
/* 上面的是除了 IE6 的主流浏览器通用的方法  */
* html,* html body /* 修正 IE6 振动 bug */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

转自http://blog.163.com/pcttcnc2007@126/blog/static/517529582011111883215315/

转载于:https://www.cnblogs.com/Janejxt/p/5807406.html

baicong1883

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS hack常用方案（摘选）

邮箱因为默认了line-height?：170%,导致采用table元素时继承问题，可以采用line-height：50% 很好解决。常在使用float时，后面的显示不正常，因为继承了float了，可以采用clear来实现正常，当采用了display：inline-block实现块与块之间连接后，由于ie6不正常，可以采用margin移动到目标实现，很多时候...
复制链接

扫一扫