我们在制作网页时，有时会希望一个元素既能像 block 一样定义宽度和高度，又可以像普通的 inline 一样不断行。例如下面这张图片中红线标出的地方：

通常我们实现这样的效果会使用这样的代码：

<a href=”#”><img src=”….” alt=”….” /></a>

这样虽然可以达到目的，但相对来说代码还是不够精炼，也不够灵活。而理想的方式，我们仅通过下面的代码即可实现：

<a href=”#”>Yangliu.name</a>

这样一来，我们就需要对 a 标签指定 width height 和 background-image。但 a 标签默认的 display 属性是 inline，width、height 是无效的。而如果对 a 设置 display:block，虽然可以解决宽度高度的问题，但元素会自动断行，无法达到我们需要的效果。有没有什么方式可以实现类似 img 标签那样，既可以设定高度宽度，又不会自动断行呢？

答案是肯定的。在 Opera 和 Webkit 中支持一个 CSS2 的属性 display: inline-block。利用这个属性，在 Opera 下即可完全实现我们所需的效果，但在其它浏览器下就不行了。

display 属性另外还有一个不太常用的值 display: inline-table。利用这个值也可以完全实现我们所需的效果。这个属性被除了 IE 以外的所有浏览器正确支持，但是…… 呃，又是 IE。虽然在面对 CSS 的时候所有 Web Developer 都会恨之入骨，但放弃 IE 就等于放弃 70% 的用户，所以我们还是得找出其它的解决方案。

没辙了，只好 Google，结果还真给我找到了。在这篇文章中指出，如果你首先触发 IE 的 hasLayout，然后再设置它的 display: inline，这个元素将变为 inline-block! 这样一来，我们就可以利用 IE 这个不可理喻的特点，结合一些 CSS Hacks，给出兼容各种浏览器的 CSS 代码：

.element-class {
    display: -moz-inline-stack;  //Firefox only code
    display: inline-block;       //some standard browsers
    zoom: 1;                     //IE only
    *display: inline;            //Only IE know this code (CSS Hack)
}

通过这样的代码就可以实现在各种浏览器中表现一致的 inline-block 了。不过这种方式有个小缺憾，就是无法通过 W3C CSS 验证。当然，要想通过验证也很简单，可以对除了 IE 之外的浏览器发出 inline-table 属性的样式表，对于 IE 单独发出一份 IE Only 的 CSS。

今天在一位德国朋友的博客上，看到了一个不错的通用解决方案。这里我简单介绍，或者说翻译一下作者的方法：

在 Firefox/Opera 等良好支持 W3C 标准的浏览器中，如果我们希望将某个元素固定在页面底部，我们可以给它指派这样的 CSS：

position: fixed;
bottom: 0;

对于 IE7 来说，它虽然可以正确的将这个元素 fix 在底部，但它却错误的处理了水平方向的位置。对于这个问题，我们可以利用一个原有的 hack 来解决：

left: 50%;
margin-left: -390px;

这里 margin-left 的值应该修改为您页面主要区域宽度的一半。这样 IE7 下基本也就完美了。剩下需要解决的就是 IE6, IE5.5 的问题了，他们不懂得 position: fixed 属性，所以我们需要单独解决一下：

首先我们为这些浏览器单独创建一个样式表，我们可以利用条件注释语句，让 IE<7 的浏览器单独载入这个“多于”的样式表：

<!–[if IE lt 7]>
<link rel=”stylesheet” href=”path/to/stylesheet/ie-stuff.css” type=”text/css” media=”screen” />
<![endif]–>

然后我们在这个 CSS 文件中，对这个需要固定在页面底部的元素添加 CSS 属性：

postion: absolute;
bottom: auto;
top: expression( eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollTop + (documentElement.clientHeight – this.clientHeight) – 1 : document.body.scrollTop + (document.body.clientHeight – this.clientHeight) – 1);

这里事实上就是利用了 IE 中特有的 CSS 运算符 expression。在 expression 中我们可以利用 Javascript 计算出需要的 top 值，这样就达到了与 position: fixed 同样的效果。

这种方法原理上来说和以前的 Javascript 方案是相同的，但这种方法显然通用性更好一点。当然，如果您不介意用 Javascript 的话，实现同样的效果会更直观更简单一点。

看了这篇文章，想想自己也经常和 CSS 打交道，对于压缩 CSS 还是有一点心得。总结一下，和大家分享。

我们知道，在 XHTML+CSS 布局流行的今天，CSS 已经成为一个网站事实上的“门面”。那么为什么我们需要一个尽可能小的 CSS 文件呢？这主要是基于流量和读取速度两方面考虑。小的 CSS 文件可以节省你的服务器流量，同时缩短用户打开你网页所需的时间。既节省了流量开支，又获得了更好的用户体验，何乐不为呢？下面我们一起看看有哪些缩小 CSS 的方法。

1. 简化你的注释
   很多情况下，特别是曾经从事过 C/Java 等语言开发工作的程序员，可能会喜欢写多行注释，例如：
   /*————————*/
   /*—comments——–*/
   /*————————*/
   在编译语言中这样的注释当然没有问题，但在 CSS 中他们会显著的增大 CSS 文件的体积，应该尝试简化成这样：
   /*Comments*/
   这样在保持可读性的同时，减小了文件体积。事实上，在一个真正发布版本的 CSS 文件中，你完全可以去掉这些注释。
2. 简化颜色代码
   在 CSS 中，我们经常会跟十六进制颜色代码打交道。你可能习惯于写成以下“标准形式”：
   color: #ffffff;
   color: #ff88ff;
   事实上，在 CSS 中是可以简化这个写法的，我们可以写成：
   color: #fff;
   color: #f8f;
3. 使用单行属性代替多行属性
   在 CSS 中像 margin/padding/font/border 等属性均可以用一行来代替很多行设置，例如：
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 0;
   padding-right: 0;
   我们可以写成：
   padding: 10px 0 10px 0;
   顺序为上、右、下、左，当然，对于 margin 和 padding 属性，当左右/上下的值相同时，还可以写的更简单，例如上面的例子，可写为：
   padding: 10px 0;
   上下左右都相同时，甚至可以写成：
   padding: 10px;
   对于其它缩写方法，可以参考网上一些资料。当然，我更推荐使用 TopStyle 这款软件在写 CSS 的过程中学习，它会给出具体提示。
4. 当值为 0 时可省略掉单位
   例如：padding: 0;
5. 同时设定多个元素的属性
   举例说明。例如：
   h1 {
       margin: 0;
       padding: 0;
   }
   h2 {
       margin: 0;
       padding: 0;
   }
   h3 {
       margin: 0;
       padding: 0;
   }
   更赞的写法是这样：
   h1,h2,h3 {
       margin: 0;
       padding: 0;
   }
6. 删除空白和换行
   这是个很不起眼的操作，但对于脱离了开发阶段，而要应用在网络上的 CSS 而言应该进行这样的处理，至少 Google 所有应用都是这样做的。举个例子：
   h1  {
       margin: 0;
       padding: 0;
   }
   blockquote {
       background-color: #ffcccc;
   }
   应该处理成：
   h1{margin:0;padding:0;}
   blockquote{background:#fcc;}
   事实上，在 CSS 文件中可以不需要任何换行的。但是为了保持代码那么一点点可读性，我还是比较建议每个元素写成一行。现在可以利用一些工具来进行类似的操作，因此它将不会影响你的开发过程。
7. 设定过期时间，使用 GZip
   如果有条件的话，我们应该设定 CSS 文件的过期时间，并开启 GZip 来传输 CSS 文件。设定前者可以让流行的浏览器缓存你的 CSS 文件，从而避免每次 Load 都要读取文件，大大加快速度同时也降低流量消耗。而开启 GZip 则可以让你的 CSS 文件缩小的难以想象的程度，而且如今流行的浏览器都是支持 GZip 的。

如今 Web Application 横行，在 Web 2.0 网站的各种设计元素中，按钮是无法或缺的。如何用最简洁的方法制作最漂亮的按钮就成为了一个问题。本文讲述的方法，代码上简洁，符合 XHTML 标准，不需要 Javascript，只需要纯 CSS 即可完成，而且通用性很好，使用起来也很方便。上图即为最终成品的例子，您也可以通过演示页面体验一下。下面我将详述整个制作过程，相信通过这个教程您肯定可以学会。

第一步：准备图片

对于一个好的 UI，一个很重要的方面就是要能及时的与用户发生交互。对于按钮来说，我们需要让按钮相应各种鼠标事件，让用户知道它是可以按下的。如上图，我们要制作的按钮共有三种状态：正常状态、鼠标划过、鼠标按下。通常情况下，我们会想到利用 onclick、onmouseover 这样的事件来控制，而事实上，我们完全可以利用通用性、便捷性更好的 CSS 代替 Javascript 来完成这个过程。尽可能将表现的事情交给 CSS 来做，这也是良好设计的原则之一。

为了能够实现这种效果，我们需要准备三个状态的图片。利用 CSS 的 background-position 属性，我们完全可以将三种状态的图片放在一张图片中，这样可以获得更好的缓存效果。

此外，按钮两侧的圆角也是比较烦人的问题。因为我们要制作的按钮需要能够自动适应内部文字的长度，因此我们需要应用一种叫做“拉门技术 (Sliding door technique)”的 CSS 技巧。具体原理不讲了，这里只介绍具体做法：

我们使用超链接来生成按钮，为了使用 Sliding door technique，我们需要按照如下方式书写 HTML 代码：

随后，我们需要准备两张图片，作为按钮的背景（分别为 span 标签和 a 标签的），具体示意图如下：

这里需要指出，280px 并不是绝对的，它代表了这个按钮在您的应用中可能用到的最大值。此外，所有的值都可以根据您实际的背景图做出更改。

第二步：书写 CSS 代码

为了能够让 A 标签准确的显示我们需要的效果，我们需要设定其 display 属性为 block，但是，很多情况下，我们需要在同一行中显示多个按钮，我们可以通过设定 float:left 或 float:right 来达到。提醒一下，这样设定後，当您放置完按钮后不要忘记 clear 一下 。

首先看看显示基本布局的代码，本例中，两侧圆角部分为 10px，按钮高度为 24px，保留区域为 1px：

这里需要指出的是：1. 保留区 (1px) 是包含在 SPAN 中的，具体可以注意看 padding 的设置；2. SPAN 的 line-height + padding-top + padding-bottom = A 的 height。

经过这样设定后，我们的按钮的基本样式就完成了，但它还没有交互效果，我们通过设定 a:hover 和 a:active 来实现：

我们看到，主要是应用了 background-position 属性调整背景图片的位置，这比使用多张图片效果更好。在 a.button:active span 中，我们重新设定了 padding 的值，使字符向右下方移动 1px，按下的效果更明显，这也是之前提到的保留区的作用。

第三部：最后完善

其实做完上面两部，我们的按钮基本上已经完工了。但是在各种浏览器中都有一个讨厌的问题，就是当超链接被点击后，会留下一个讨厌的虚线框。这个破坏美观的东西，我们当然要干掉它。

Firefox、Safari 等支持 W3C CSS2 的浏览器，可以通过设定 CSS 的 outline 属性来做到这一点。在我们这个例子中，只需做如下改动：

在 Firefox 中看看，虚框已经消失了。

但 Internet Explore 不吃这一套，对付它就比较麻烦了，单单 CSS 无法解决问题，需要从 HTML 下手。我们需要将按钮的 HTML 代码改为以下形式：

这样，我们可以让超链接在点击后迅速失去焦点，从而避免虚框的出现。当然，如果我们应用中按钮比较少，这个方法还不错。但按钮比较多的情况下，我们还是应该用 DOM 方法来为 className 为 button 的 A 修改 onclick 事件（用 jQuery 或 Prototype 实现会很省心），不过这不在本文讨论的范围内了。

到这里，我们的按钮就算做好了，我相信您一定已经学会了。如果还有什么不明白的地方，您可以参考这个简单的范例，查看它的源代码来解决。当然，您也可以直接在本文後提问，我很乐意为您解答。

UPDATE:谢谢 Dan Li 发来邮件提醒，我确实发现本文与这篇文章如出一辙。早看到直接转过来就好了，白白折腾了两个小时。不知道留言中 DV 大侠所指的是不是这篇。不过我在写本文时并没有看过这篇文章，而且本文与原文还是有很大不同，而且原文中 CSS 有误 (background-position 的参数顺序不对)，虽然可以实现它所叙述的效果，但不符合 CSS 标准，也不能够进一步扩展，希望看了原文的朋友能够注意。

如需在 CC-BY-NC 协议下引用，请保留以下链接，商业网站引用请与我联系，谢谢合作。http://blog.istef.info/2007/05/09/how-to-make-a-sexy-css-button

上面这段代码即可实现这个神奇的效果。当它被当作 Javascript 载入时，它其中的 JS 代码就会被执行，CSS 代码都会被忽略；而当它被当作 CSS 载入时，结果恰好相反。

为什么会这样呢？其实原理很简单，这是由于当今主流浏览器（IE & Firefox）对于 JS 和 CSS 解释的方法。我们注意到，这段代码中多了很多不必要的 <!– 以及 /* */，其实这就是奥妙所在。当代码被当作 Javascript 载入时，所有的 <!– 都会被解释为 // 也就是 Javascript 的单行注释符号，所以，上面的代码变为：

CSS 被注释掉，而 Javascript 则被顺利的执行了。当代码被当作 CSS 载入时，所有的 <!– 都会被忽略，于是代码变为：

/* */ 为 CSS 注释符，包含在之间的文字被认为是 CSS 注释。因此上面的代码中 Javascript 被注释掉了，只剩下正常的 CSS 可以被解释。

这段代码构思非常精巧，很好的利用了 Javascript 和 CSS 解释器的特性。但是我个人并不推荐将此方法推广，原因如下：1. 增加了代码的复杂度，阅读和修改都不是很方便；2. 多于的 <!– /* 会占用不少字节，实际上也是在浪费宝贵的带宽，延长载入时间。我个人还是推荐使用 Javascript 或 CSS 压缩的办法来提高效率。当然，如果您的应用确实需要尽可能少的载入文件的话，这倒不失为一个解决问题的好办法。

从 XHTMLGenius 的网站上看，这应该是一项人工服务。客户只需要将设计图给他们，并接受他们的报价（至少 $250），他们就会在 3 个工作日内为您写好 XHTML 和 CSS，并承诺其作品为良好构建的，整洁的并可以通过验证的 XHTML 和 CSS。同时，他们也保证最终作品可以在 IE，Firefox 和 Safari 中均能正常显示，真正实现了跨平台的要求。

在 Shook.ca 上有一篇文章对这个服务进行了简单评价，貌似结果还是很令人满意的。不过 $250+ 的价格真是不便宜，给我设计图 + $200 估计至多 4-5 天我也能够达 XHTMLGenius 提出的要求。不过对于那些工作任务繁重的设计大牛们来说，花上 $250 把自己从乏味的 HTML 代码中解放出来，从而专心于设计，应该还是有一定意义的。

btw: Shook.ca 上还有另一篇 Web 设计方面的好文，推荐去看看。

第一篇是讲利用 CSS 美化表单的，原文在这里。作者用一个很简单的例子讲述了如果将通常很单调的表单利用 CSS 美化，从而增强用户体验。在这篇文章中，作者还强调了一下如果用 HTML 规范的书写表单，很值得借鉴。国内很多的网站，为了表单布局通常不惜代价的乱用表格之类的东西，这样对于用户使用和开发者阅读代码来说都是一种负担。灵活的运用fieldset, legend, label 这几个标签，完全可以替代传统的表格布局写出漂亮的表单，而且代码干净易读。这篇文章就是个很好的例子，很是值得 Web 开发者借鉴。

第二篇文章是讲 CSS 分栏的，而且说的是 CSS3 分栏，原文在这里。DIV+CSS 布局后，CSS 分栏真是个令人头痛的问题，float 来 float 去麻烦不说，还要考虑浏览器兼容性等等问题。这篇文章作者演示了 CSS3 分栏的效果，从文章中可以看出是那么的简单，而且效果非常的酷。如今能支持 CSS3 的浏览器恐怕只有 WebKit 和 Safari 了，可惜这两个都是 Mac 平台上的东西，像我这样的穷人就没法体验了 T.T。想想 CSS3 众多超炫的特效，今后的网页必定比现在漂亮很多，很是期待呀。

这两天一直在做页面，也就顺便好好研究了一下 CSS。今天又发现了一个很酷的 CSS 网站，一个用纯 CSS 实现的画廊页面。页面干净简洁，效果一流，最令人称道的是作者还写了一个教程，详细讲解了如何实现这个效果。不过貌似这个教程已经有一个月了，看来这次我又“火星”了

突然有个想法，要是和 LightBox 2 结合起来，应该可以做一个很酷的相册程序吧，谁要是做好了一定发我一份哦

UPDATE: EMI 做了一个 HoverGallery 和 LightBox 2 结合的画廊，效果真的很酷，不妨去看看。

你能相信上面图中这个立体感很强的房子是完全用 CSS “写”出来的吗？看看这里就知道了。说实话，我第一次看到时也不太相信这张网页竟然没有使用一副图片，看过源码后，不得不佩服作者高超的 CSS 技艺。当然，作者做这个主要也是用来“秀”的，虽然 CSS 是个很强大的东西，但正常情况下也决不能这样用。几年前的老机器开这张网页估计是比较费劲了。

好了，欣赏完上面那个网页后，看看作者的新房子吧。

由于我平时都是用 Firefox 浏览的，所以在后期测试时就没有用其它浏览器看看。根据经验，肯定又是 Box 定义的问题，但是明明在做 HTML 效果页面的时候是好好的（ IE6 FF Opera 都测试通过），怎么做成模板后 IE6 又不认账了呢？

仔细对比了一下代码，发现在最终生成的页面中比效果页多出一行，就是第一行那个 <?xml version=”1.0″ encoding=”UTF-8″ ?> ，原来是犯了大忌！从模板中去掉这一行，IE6 下面的效果瞬间就正常了。

众所周知，IE 在处理 CSS Box 定义方面与 W3C CSS 有所不同，但对于 IE6 这个不同不是绝对的。IE6 内部事实上有两套 Box 定义，如果网页第一行为 <?xml version=”1.0″ encoding=”UTF-8″ ?> （一般 xhtml 网页都会有这一行），IE6 就会使用针对 xhtml 的引擎，并使用不规范的 box 定义，于是也就产生了页面错位等现象。IE 在处理 xhtml 文件时，事实上仍然使用的是 HTML 解析引擎（IE7 也仍然如此），所以根本没有必要在开头加上那一行。不加的话，IE6 的 Box 定义和 W3C CSS Box 定义基本上一致，可以有效的降低编写 CSS 的工作量。如果加上坏处主要有两点，第一就是 IE Box 模型的使用会导致页面错位，另一点就是对于像 Firefox 这样的浏览器会使用 XML 引擎来处理页面，一旦页面中出现任何不符合 XML 规范的内容（例如某个访客的留言中 HTML 标签未封闭），整个页面就无法显示了。所以现阶段，还是不要加这一行的好。

目前已知的问题，IE5 浏览还是不行，不仅CSS有问题，Javascript 也执行不了。不过 IE5 都是淘汰货了，还有必要支持它吗？其它浏览器（如 Konqueror Safari 之类）我还没有时间、条件来测试，有条件的朋友帮忙测一下，最好能把有问题的截图发给我，谢谢啦。

此外，接着这个机会，好好调整了一下页面，现在可以通过 XHTML 1.1 标准了