今天有用户报告，说打开我们的页面会导致浏览器崩溃。查了下，原来是这句 CSS 导致了性能的问题

_height: expression(this.scrollHeight > 200 ? 200 + 'px' : 'auto');

看来还是 Exploer 的 CSS expression 作祟。简单的说明下这个语句，主要是实现 Exploer6 不支持的 max-height 属性而做的个 Hack（是个「历史遗留问题」）。

期前对于 CSS expression 也做过类似的测试 ，使用程度为--慎用--禁用（原因有三，仅 Exploer 支持、性能消耗很大、脚本和表现混杂）。

这一 Hack 姑且可以被认定为，是在 Exploer6 走向末路之前的「救命稻草」（但目前在日常的项目中，如果出现这样的代码，是无论如何都不会被允许的）。

最后， 简单的写了个 DEMO ，以及更多的信息可以 查看这里 。

注： Exploer7 已经支持 max-height 等属性。

很多时候，希望能够在 HTML 中使用空格排版。但浏览器在解析 HTML 时，会把连续的空格解析成一个，所以我们会使用   等这样的占位符。

但是   也不是很可靠，比如空格间距非常大，那么我们必须增加多个占位符，同时页面的体积会变得非常大。

同时，注意到 Safari 中的   宽度是已设定字符的空格宽度（Safari 的默认字体为 Times），也就是说一个中文字符需要两个占位符。

具体情况如下图所示

其实，这不是 Safari 的问题，而是字体的问题。解决的方式就是使用下面的属性

font-family: '宋体';

将 Safari 的默认字体 设置成「宋体」等中英文等宽的字体 ，就能解决。Windows 版本的 Safari 字体设置，需要直接使用中文「宋体」这样的名称而不是「Simsun」（了解原因的兄弟请告诉我）。

但至此，我们的根本目标没有解决，就是能否避免使用   这样的占位符，而使用「原生」的空格。考虑针对空白的相应 CSS 属性，具体了解有关 white-space 的用法 ，接下来就比较好处理了。

总结下使用 white-space 实现等宽空格的条件，有两个。需要设置对应的属性

white-space: pre;

然后设置等宽字符（包括等宽空格）即可。综合起来，就是这样

font-family: '宋体', Simsun;
white-space: pre;

由于使用了中文 CSS 名称，所以在实际使用中需要考虑样式的字符编码问题。同时，需要额外考虑的是，苹果机是否有「宋体」（或者其他等宽的字体）， 有苹果机的兄弟请帮忙测试下 。

--Split--

感谢 小马 提供的另外一个思路，就是使用 em 单位。1em 简单的说，就可以认为是一个字符宽度；同理，.5em 就是半个字符。那么，上面的情况就可以使用这样写。

<span>买<ins class="half-word"></ins>宝<ins class="half-word"></ins>贝：</span><br />
<span>我的淘宝：</span><br />
<span>社<ins class="two-word"></ins>区：</span><br />

对应的 CSS 应为

.half-word {width: .5em;}
.two-word{width:2em;}

经测试通过。

--Split--

针对这上述的两种不同方法，个人认为应当按照实际情况考虑采用。比如第一种方法，虽然依赖具体的等宽字体，但没有添加其他额外的结构，对于以后的维护会更加的方便；第二种方法，则更多的考虑了实际的应用情况（同时也不用依赖具体的等宽字体），但是也添加了额外的结构。

所以，如考虑到以后的可维护性，同时「语义」的角度上分析，推崇第一种做法。而实际的应用情况下，同时需要应用比较复杂时，个人会选用第二种。

另，感谢 小虎 的发言

在没有半角空格的复杂的情况下，可以考虑使用中文的全角空格

MacJi 「偷懒」翻译了部分 ，下午冒着被 BOSS 开除的危险将其补完（ 原文链接 ）。

使用 line-height 垂直居中

line-height:24px;

使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以 看这里 。

清除容器浮动

#main {
    overflow:hidden;
}

期前也提到过这样的问题 ，更多信息可以看 这里 。

不让链接折行

a {
    white-space:nowrap;
}

上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论， 参看圆心的记录 ）。

始终让 Firefox 显示滚动条

html {
    overflow:-moz-scrollbars-vertical;
}

更多的 Mozilla/Firefox 私有 CSS 属性可以 参考这里 。需跨浏览器的支持，也可以使用

body, html {
    min-height:101%;
}

使块元素水平居中

margin:0 auto;

其实就是

margin-left: auto;
margin-right: auto;

这个技巧基本上所有的 CSS 教科书都会有说明，别忘记给它加上个宽度。Exploer 下也可以使用

body{
    text-align: center;
}

然后定义内层容器

text-align: left;

恢复。

隐藏 Exploer textarea 的滚动条

textarea {
    overflow:auto;
}

Exploer 默认情况下 textarea 会有垂直滚动条（不要问我为什么）。

设置打印分页

h2 {
    page-break-before:always;
}

page-break-before 属性能设置打印网页时的分页。

删除链接上的虚线框

a:active, a:focus {
    outline:none;
}

Firefox 默认会在链接获得焦点（或者点击时）加上条虚线框，使用上面的属性可以删除。

最简单的 CSS 重置

* {
   margin: 0; padding: 0
}

如果想「复杂」，参考 YUI 的做法 （还有 这里 ）。原文留言中也有用户说了他们的观点

I have to agree with Niall Doherty, * {margin: 0px; padding: 0px;}
basically means "traverse every css element and give it these 
attributes". That is a very unnecessary strain on the server and 
a bad semantic practice, as you have to give some elements 
padding/margin again, after stripping them.