1. CSS布局和用户界面技巧

当前 CSS 主要应用于创建页面布局。利用 CSS 创造页面布局和用户界面，有几乎无限的可能性。下面是一些更有趣的CSSCSS技巧。

The simplest way to horizontally and vertically center a DIV
本文介绍用 CSS 方法使 DIV 纵向或横向居中。虽然有很多通过父 DIV 和子 DIV 实现居中的代码，但这个特殊方法仅使用一个 DIV 元素，并且简单得多。

New CSS Sticky Footer – 2009
一个棘手的完全跨浏览器兼容的页脚CSSCSS技巧，兼容 Google Chrome 浏览器，并且不需要空 DIV 辅助。

Simple Page Peel Effect with jQuery & CSS
此教程结合 jquery 和 CSS 创建网页剥离效果。大多数网站都使用 Flash 来实现这种效果。因此如果不热衷于 Flash 技巧，这会是一个不错的选择。

Equal height boxes with CSS
一个使用 CSS 创建等高栏式布局的基本实例，彻底抛弃表格布局的代码冗杂与混乱。

Adaptable view – how do they do it?
让用户手动改变网站的表现，似乎可以大大提高网站的易用性和用户粘度。本教程将介绍如何为网站实施和部署浏览器适应技巧。

CSS: The All-Expandable Box
一个创建自适应 CSS 容器的教程。容器会自动向各个方向扩大，以适应所包含的内容，而不只是垂直增长。适用于用户可控字号导致使 CSS 容器撑开的情况。

Four Methods to Create Equal Height Columns
一个使用 CSS 创建等高列的教程，共涉及四个不同的技巧。兼容所有主流浏览器（甚至 IE6 浏览器）。

Vertical Centering With CSS
这篇文章包括各种使 CSS 元素垂直居中于网页的最佳技巧。同时也介绍了如何利用这些CSS技巧，创建一个简单小巧的垂直居中的站点。

CSS vertical center using float and clear
使用浮动 (float) 和清除 (clear) 创建垂直居中的 CSS 容器，甚至兼容 IE5 版本。

Cross-Browser Inline-Block
本教程涵盖在多重内容情况下，创建一个内联块 (inline-block) 布局的方法，而不打破布局的完整性。

The CSS “Ah-ha!” Moment
谈论大多数设计师，在其职业生涯的某个时候发出 “Ah-Ha!” 感叹的时刻。以及一些重要的关于 CSS 容器布局的灵感突现。

An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning
本文给出了关于 CSS 层，相对和绝对定位。以及 Z-Index 属性的全面概述。

The CSS Overflow Property
详解了 CSS 溢出属性的工作流程。包括可见 (visible)，隐藏 (hidden)，滚动 (scroll)，自动 (auto)，以实例说明逐一说明。

Absolute, Relative, Fixed Positioning: How Do They Differ?
分析容易混淆的绝对 (absolute)，相对 (relative)，固定位置 (fixed) 之间的差异性，详细说明各个属性的区别。

display: inline-block
介绍在不同的样式中创建内联块 (inline-block) 的方法，并兼容不同的浏览器环境。

2. CSS导航和菜单技巧

良好的导航是网站中非常重要的一部分。良好的导航既方便用户使用，也补充和完整了网站的其他设计元素。以下是一些关于创建导航的CSS技巧和提示，使其两者兼备。

Create dropdown menus with CSS only
一份创建 CSS 下拉菜单的完整教程，该方法快速而且易于实施。

Simple scalable CSS based breadcrumbs
在网站上使用面包屑导航，可以方便访问者浏览。本教程介绍了一种创建基于 CSS 的，可伸缩面包屑导航的方法。

Horizontal Sub-nav with CSS & jQuery
一份关于使用 CSS 技巧创建横向导航子菜单的完整教程。如果希望正常工作于 IE6 浏览器，可能需要执行一些 jQuery 代码。

CSS Step Menu
建立一个阶梯式菜单（也称为“向导菜单”）可能会非常棘手，特别是当它需要根据实际应用做出一些改变的时候。本文给出了创建该类菜单的实例。

The Tabbed Breadcrumb Navigation
一份关于创建面包屑导航，并格式化为标签式的全面教程。

Apple’s Navigation bar using only CSS
该教程说明如何创建一个类似苹果网站的导航栏，仅仅使用 CSS 和 html 代码（不附加任何图片）。

Sitemap Celebration
一款跨浏览器兼容（即使是 IE5 版本），并且基于嵌套列表的网站地图 (Sitemap) 风格。

Nice CSS menu with feed reader icons list
使用 CSS 创建一个供稿 (Feed) 阅读器图标菜单。可以方便地适用于其他类型的菜单。

Multi-level Menus with jQuery and CSS
使用纯 CSS 以及 CSS/JS 创建多级联动菜单的技巧集锦。也涵盖了更先进和富有创造性的实例。

3. CSS图像样式和相册技巧

在网页设计中，图片造型是一个经常被忽视的因素。以下这些精选的的技巧和CSS技巧，将帮助你纠正和改善这种情况。

Centering images with CSS
一些关于图片居中的基本资料，使用 CSS 控制而不是过时的纯 HTML 布局。

Add a Custom “Trendy” Border Around Blog Images With CSS & JavaScript
一份关于如何在博客上，建立各种图片边框样式的完整纲要。使用 javascript 和 CSS 技巧相结合。

Sexy Music Album Overlays
为图像画廊增加更多风格样式的教程，文章使用专辑封面的制作过程作为一个实例。

Create CSS pin balloons with ease
这是一个强大的技巧，从简单的锚点标记，扩大过渡到为图像增加引脚气球、气泡提示或地图标示。

Create an Image Rotator with Description (CSS/jQuery)
一份关于如何使用 CSS 和 jQuery CSS技巧建立图片旋转/画廊的教程。本文将创建一个干净的界面，用于显示一般的或组合的图像廊。

5 Popular CSS Speech Bubbles
收集了使用 CSS 创建气泡提示的 5 个不同的技巧（有些纯粹用 CSS 实现）。

How to Make a Threadless Style T-Shirt Gallery
创建一种类似 Threadless 网站的图像画廊效果，以字幕或覆盖图片或缩略图的顶部。功能的实现技巧值得借鉴。

CSS image replacement for… images? It makes sense for print. (Ask the CSS Guy)
基于 CSS 样式表打造针对打印用途和屏幕显示优化的图像。

Beautiful new CSS: box-shadow
关于利用 CSS 创建容器阴影效果的教程，德文网站。

4. CSS字型排版技巧

CSS 擅长于字型排版设计。无论是字体类型，重量还是颜色，都需要使用 CSS 来定义。以下是一些指南，帮助你创建更好的网页版式。

Truetype, Font Variants and Antialiasing
一篇关于使用 Truetype 字体的文章，分析了为何有时字体显示效果不像所期望那样的原因。

Styling Ordered Lists with CSS
使用 CSS 创建一个极具吸引力的有序列表。

Beautiful fonts with @font-face
关于 @font-face 属性的基本使用教程，以及如何在网页设计中插入 Truetype 字体。

Forgotten possibilities of :first-letter in CSS
关于 CSS 中的 :first-letter 属性的使用，俄文网站。

8 Definitive Web Font Stacks
基于确切字体格式的 8 个通用 CSS 字体集，以帮助设计人员决定网站版式设计，选用适当的字体集，并调整到需要的合适效果。

Mike’s Experiments – CSS: Perspective Text
一个创建文字角度效果的有趣实例（即使文字块的底部看起来更接近顶端）。

Fonts for web design: a primer
一份适用于网页设计师的版式设计指南，包括字体类型的选择及其合适的用法。

CSS text-shadow Fun: Realtime Lighting Demo
使用 CSS 的文字阴影属性结合 JavaScript 技巧，来创建一个发光效果实例。

Rendering Quotes With CSS
一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。

Six Ways to Style Blockquotes
使用 CSS 为 XHTML 中的 blockquote 标记定义样式的多种方法。

Make OL list start from number different than 1 using CSS
教你如何自定义有序列表起始数字的简明教程。

Use CSS to Override Default Text Selection Color
这篇文章介绍使用任何颜色为文字设置高亮颜色的方法。

CSS Drop Cap Effect
为文章内容设定首字下沉的 CSS 方法，尤其适用于杂志型或书籍型网站。

5. 图标，按钮和链接

图标，按钮和链接在许多网页上经常是被忽视的因素。但是实际上它们也会对整体设计产生巨大的影响。以下是一些使网页造型更佳的资源。

Add Progressive Icons to Your Site Using :after pseudo-element
此教程说明如何为链接添加图标描述，按照不同文件类型指定不同图标（如 PDF 或 ZIP 文档）。

Super Awesome Buttons with CSS3 and RGBA
关于使用 CSS3 和 alpha 混合CSS技巧创建按钮的教程。

Scalable CSS Buttons Using PNG and Background Colors
使用 PNG 图像创建横向或纵向的可伸缩菜单。该CSS技巧能实现优雅降级，即便使用 IE6 浏览器仍可看到按钮（只是没有了 PNG 图像）。

Add File Type Icons next to your links with CSS
为链接添加文件类型图标的教程。

22 CSS Button Styling Tutorials and Techniques
一份涉及 20 多个CSS技巧的全面资源清单。关于如何使用 CSS 创建不同形状，不同尺寸的图标。

CSS Tricks’ Link Nudge
创建当鼠标停留时的缩进菜单效果的教程。

Sanscons
一些可以使用 CSS 重设图标颜色的图标集。

英文原文：精通常用元素CSS高级设计CSS技巧 | Smashing Magazine
中文译文：精通 CSS 造型设计元素 | 芒果

http://knb.im/css3/

http://desandro.com/articles/opera-logo-css/

http://shdianji.com/danboard.html

1.CSS字体属性简写规则一般用CSS设定字体属性是这样做的：

font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;

但也可以把它们全部写到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

2. 同时使用两个类

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

<p class=”text side”>…</p>

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

补充：对于一个ID，不能这样写<p id=”text side”>…</p>也不能这样写

3. CSS border的缺省值

通常可以设定边界的颜色，宽度和风格，如：

border: 3px solid #000

这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

4. CSS用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” />

<link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />

第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

5. 图片替换技巧

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

<h1><img src=”widget-image.gif” alt=”Buy widgets” /></h1>

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

<h1>Buy widgets</h1>

但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

6. CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

#box { width: 100px; border: 5px; padding: 20px }

这样调用它：

<div id=”box”>…</div>

这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的，让它们显示效果一致。

#box { width: 150px } #box div { border: 5px; padding: 20px }

这样调用：

<div id=”box”><div>…</div></div>

这样，不管什么浏览器，宽度都是150点了。

7. 块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：

#content { width: 700px; margin: 0 auto }

你会使用 <div id=”content”> 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

这会把网页内容都居中，所以在Content中又加入了:text-align: left 。

8. 用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。

9. CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：

#container { position: relative }

这样容器内所有的元素都会相对定位，可以这样用：

<div id=”container”><div id=”navigation”>…</div></div>

如果想定位到距左30点，距上5点，可以这样：

#navigation { position: absolute; left: 30px; top: 5px }

当然，你还可以这样：

margin: 5px 0 0 30px

注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。

10. 直通到屏幕底部的背景色

在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：

#navigation { background: blue; width: 150px }

较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？

不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。

body { background: url(blue-image.gif) 0 0 repeat-y }

此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。

1. 区别FF和IE
1-1
首先，当然是!important大法，可以提升指定样式规则的应用优先权，如下面的例子：
插入代码：
div{
background-color: red !important;
background-color: blue;
}
因为!important声明在IE6中并不是绝对的，它会被之后的同名属性定义所替换。也就是说在上面的例子中，IE6所应用的是最后一个背景色的值，即“blue”；而在FF中背景色的值为“red”。
1-2
还有一种方法，就是IE浏览器可以识别“>”等一些符号，如“~”、“`”、“
插入代码：
div{
background-color: red;
>background-color: blue;
}
在FF中得到的是背景色红色，而在IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识别“>”，则应该得到的蓝色的背景，因此可以知道“>”只有IE可以识别。
这样，我们就可以把FF和IE的样式分离开。下面就是解决IE自己的问题了。
2. 区别IE5.5和IE的其他版本
看一个例子：
插入代码：
div{
>background-color: black;
>background-color /*IE5.5*/: green;
}
这个例子使用了“>”，只有IE可以识别，在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。
到此我们已经把FF、IE5.5、IE6分离出来了，那IE5呢？其实现在我们只要把IE5跟IE6分开就OK了。
3. 区别IE5与IE5.5+
插入代码：
div{
>background-color: red;
}
div/*IE5.5+*/{
>background-color: black;
}
这里我们又用到一个HACK，就是“div/**/{}”，这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是，在IE5中的背景色为红色；在IE5以上版本中得到的是黑色背景。
4. 完整的Hack
这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子：
插入代码：
div{
width: 500px;
height: 50px;
background-color: red !important;/*FF*/
background-color: blue;/*IE5*/
text-align:center;
}
div/*IE5.5+*/{
>/*IE only*/background-color: black;/*IE6*/
>/*IE only*/background-color /*IE5.5*/: green;
}
需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“>”，因为“div/**/{}”这个HACK在FF中可以识别。

#hackme{
/*style for all browser here*/
}

* html #hackme{
/*style for ie here*/
}

下面是一个ie6 png hack，用于内联css

height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/

IE7的hack
IE7 修复了很多 bug，也增加了对一些选择符的支持，所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用，条件注释才是万无一失的过滤器，但是条件注释只能出现在 HTML 中，CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack，具体就是：

>body
html*
*+html

这三种写法，其中前两种都是不合法的 CSS 写法，在标准兼容浏览器中被被忽略，但是 IE7 却不这么认为。对于 >body ，它会将缺失的选择符用全局选择符 * 代替，也就是将其处理成了 *>body，而且不光对于 > 选择符，+,~ 选择符中这个现象也存在。对于 html* ，由于 html 和 * 之间没有空格，所以也是一种 CSS 语法错误，但 IE7 不会忽略，而是错误地认为这里有一个空格。对于第三种 *+html，IE7 认为 html 前面的 DTD 声明也是一个元素，所以 html 会被选中，这三种方法中只有这一种方法是合法的 CSS 写法，也就是说可以通过校验器的验证，因此也是作者推荐的 hack 用法。
IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element.
IE的if条件Hack

<!–[if IE]> Only IE <![endif]–>
所有的IE可识别
<!–[if IE 5.0]> Only IE 5.0 <![endif]–>
只有IE5.0可以识别
<!–[if gt IE 5.0]> Only IE 5.0+ <![endif]–>
IE5.0包换IE5.5都可以识别
<!–[if lt IE 6]> Only IE 6- <![endif]–>
仅IE6可识别
<!–[if gte IE 6]> Only IE 6/+ <![endif]–>
IE6以及IE6以下的IE5.x都可识别
<!–[if lte IE 7]> Only IE 7/- <![endif]–>
仅IE7可识别

首先我们定义一个放置图片的容器

.box{width:600px; height:300px; display:table; border:1px solid #000; background-color:#CCCCCC;}

为了更清楚看到效果，我定义了这个box的边框和背景色。

然后我们在这个容器内再多放置一个

.imgbox {display:table-cell; vertical-align:middle; text-align:center;}

由于IE不支持CSS2中的display:table和display:table-cell，而对于能解释这两个属性的浏览器来说，做到垂直局中到这里就已经足够了。因此我们要针对IE再下点功夫。对htm我们可以这样写：

<div class=”box”>
　<div class=”imgbox”><p><img src=”图片的位置” /></p></div>
</div>

然后针对IE我们补充hack的内容：

.box {*position:relative;}
.imgbox {*width:100%;*position:absolute; *top:50%; *left:0;}
　.imgbox p {*position: relative; *top:-50%; *margin:0; *padding:0;}
　.imgbox img{ *margin-top:4px;}

对IE来说，用了绝对定位和相对定位，通过两次50%的偏移找到了图片所在div的中心，因此完整的CSS应该为：

.box { width:600px; height:300px; display:table; border:1px solid #000; background-color:#CCCCCC; *position:relative;} /*这个层的长宽可以自定义*/
.imgbox { display:table-cell; vertical-align:middle; text-align:center; *width:100%; *position:absolute;  *top:50%; *left:0;}
　.imgbox p {*position: relative; *top:-50%; *margin:0; *padding:0;}
　.imgbox img{ *margin-top:4px;}

大功告成！

1. 防止图片撑破div层

.div-img {margin: auto; width: 600px;}
.div-img img{max-width: 100%!important; height: auto!important; width:expression(this.width > 600 ? “600px” : this.width)!important;}

2. 让div的内容图片垂直居中（可兼容多浏览器）

.div-img {*position:absolute; top:50%;}
.div-img img {*position:relative; top:-50%; left:-50%;}

3. 让文字从右往左竖排写

.text { layout-flow: vertical-ideographic; height:400px; line-height:200%; }

一般写法：

.with_minheight {
　　min-height: 550px;
}

但需要注意的是，IE6不支持min-height（又一个要杀死IE6的理由），但是有一个min-height hack的写法：

 .with_minheight {
　　min-height:550px;
　　height:auto !important;
　　height:550px;
}

以后在进行多栏式的布局时可以用这个属性控制美观度:coolsmile:

Adding the NOTIFICATION on your site to help phase out Internet Explorer 6 forever. They tells visitors using Internet Explorer 6 that they need to upgrade to the current version or switch to another browser right now.

Internet Explorer 6 曾经是浏览器的霸主，击垮 Netscape 并最终占据 95% 的浏览器市场。但如今已经功能性能落后，还需要特殊照顾，被称为”阻碍网络技术向前发展的障碍“。在我为其他企业设计网站页面时，为了迎合IE6的需要，往往花费了大量时间和精力。

为什么IE6要死？从一个页面设计师的角度看，有如下致命的两点：

1. PNG 是一种支持半透明通道的图片，可以方便的用于设计网页，制作叠层和其他复杂的页面效果，但是 IE6 不支持，用滤镜强行应付会导致浏览器占用超高资源，并且得不到预想效果！

2. IE6 有自己一套标准的 CSS 样式，必须写更多的代码去照顾它。

为了响应“IE6 must DIE”的活动，我在网站上加入了一个widget，有兴趣的朋友只需要在<body>标签内加入如下代码，便能为杀死IE6出一份力了！

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->

其他语言版本：

Let’s kill Internet Explorer 6, copy and paste this code before your closing </body> tag.

English
Demo

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.pack.js"></script>
<![endif]-->

简体中文
Demo

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->

繁體中文
Demo | Translated by Cracky冰

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_TW.pack.js"></script>
<![endif]-->

Arabic
Demo | Translated by Abdullah

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.ar.pack.js"></script>
<![endif]-->

Brazillian Portuguese
Demo | Translated by Franklim Pagung

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.br_BR.pack.js"></script>
<![endif]-->

Dutch
Demo | Translated by Gert Hengeveld

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.nl_NL.pack.js"></script>
<![endif]-->

Finnish
Demo | Translated by Legacy

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.fi.pack.js"></script>
<![endif]-->

French/Français
Demo | Translated by Simon Pireyn

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.fr_FR.pack.js"></script>
<![endif]-->

German
Demo | Translated by Andre

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.de_DE.pack.js"></script>
<![endif]-->

Greek
Demo | Translated by Konstantinos Rousis

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.gr.pack.js"></script>
<![endif]-->

Hindi
Demo | Translated by Abhishek Mandloi

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.hi_IN.pack.js"></script>
<![endif]-->

Hungarian
Demo | Translated by Muzsi János

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.hu_HU.pack.js"></script>
<![endif]-->

Italian
Demo | Translated by Rui

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.it_IT.pack.js"></script>
<![endif]-->

Indonesia
Demo | Translated by Arif N

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.id_ID.pack.js"></script>
<![endif]-->

Japanese/日本語
Demo | Translated by lovee

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.ja.pack.js"></script>
<![endif]-->

Javanese
Demo | Translated by Sagung Aditya

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.javanese.pack.js"></script>
<![endif]-->

Norwegian
Demo | Translated by Ingebjørg

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.nb_NO.pack.js"></script>
<![endif]-->

Polish
Demo | Translated by Cezar

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.pl_PL.pack.js"></script>
<![endif]-->

Portuguese
Demo | Translated by João José

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.pt_PT.pack.js"></script>
<![endif]-->

Romanian
Demo | Translated by Adrian Sandu

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.ro_RO.pack.js"></script>
<![endif]-->

Russian
Demo | Translated by Alexandr Sinitsin

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.ru_RU.pack.js"></script>
<![endif]-->

Spanish
Demo | Translated by Coco

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.es_ES.pack.js"></script>
<![endif]-->

Swedish
Demo | Translated by J. Nyman

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.sv_SE.pack.js"></script>
<![endif]-->

Thai
Demo | Translated by ThaiAnime

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.th.pack.js"></script>
<![endif]-->

Bilingual (English & 简体中文)
Demo

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.bilingual.pack.js"></script>
<![endif]-->

这个时候我们就需要针对不同的浏览器去写不同的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>   
<div>我在IE6中看到是红色的，在firefox中看到是绿色的。</div>
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
</style>
<div>我在IE6中看到是红色的，在firefox中看到是绿色的。</div>

解释一下：

上面的css在firefox中，它是认识不了后面的那个带星号*的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。

在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。

CSS hack:区分IE6，IE7，firefox区别不同浏览器，CSS hack写法：

区别IE6与FF：

background:orange;*background:blue;
background:orange;*background:blue;

区别IE6与IE7：

background:green !important;background:blue;
background:green !important;background:blue;

区别IE7与FF：

background:orange; *background:green;
background:orange; *background:green;

区别FF，IE7，IE6：

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

注：IE都能识别*;标准浏览器(如FF)不能识别*；

• IE6能识别*，但不能识别 !important,
• IE7能识别*，也能识别!important;
• FF不能识别*，但能识别!important;

另外再补充一个，下划线”_”, IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6，IE7，firefox

div{: background:orange;  
*background:green;  
_background:blue;}
div{: background:orange;
*background:green;
_background:blue;}

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

付:CSS hack 列表图

给点耐心自己吧……