常用CSS定义：
字间距 letter-spacing:0.2em;
行间距 line-height: 1.5em;
段首空两格 text-indent: 2em;
细线表格 table { border-collapse: collapse; }
图片与文字中心线垂直居中，在img中定义 vertical-align: middle;
兼容性定义：
避免Firefox 背景图不显示的兼容问题，定义background 属性，先后顺序不能随意变动。
background : background-color || background-image || background-repeat || background-attachment || background-position
示例：div { background: red no-repeat scroll left center }
IE图文混排，li 多出空白间距兼容问题，定义li display: block; height=高度值。
命名标准
一律小写；
尽量用英文；
不加中杠和下划线；
尽量不缩写，除非一看就明白的单词。
如果容器未定义高度，在IE6中容器的默认高度height最小值为当前容器设定的字号高度。
<div class="blankline"></div>
.blankline {
height: 5px;
}
如果设为 height: 5px; IE6下高度就会变为所设定的字体高度，远大于5px。
color 必须设定在font 定义之后，否则定义不起作用。
font-size: 100%;
font-weight: bolder;
color: #555555;
换行控制。
word-wrap 控制换行 { break-word 强制换行 }
word-break 控制断词 { break-all 换行时折分字母 keep-all 换行时英文按词换行,中文按句从有标点符号处换行 */
下图是使用keep-all属性，对于英文内容使用较好，可以换单词换行，不折单词中的字母，如果是中文，则从有标点符号处换号，使中文版面看起来较乱。所以，中文建议用break-all，英文用keep-all 。
对于Firefox，长串英文不能自动换行，对此网上有JS解决办法，但是对于小网站为这点小毛病兴师动众有些划不来，超长部分就用overflow: hidden;隐藏起来好了。
如果你是完美主义者，也可以看看老外的解决方案：http://www.hedgerwow.com/360/dhtml/css-word-break.html
最后总结一下：兼容IE和Firefox的换行问题的CSS方法是：
table-layout: fixed; /* 防止撑开IE表格 */
word-wrap: break-word; /* 强制换行 */
word-break: break-all; /* 按字母折分 */
overflow: hidden; /* Firefox 超长隐藏 */
背景图
在CSS中应用背景图，background-repeat，铺排
对于IE没有问题，但在Firefox中，图片大小会影响容器的大小，在Firefox中会按照图片尺寸显示完毕，而不是依照容器的尺寸显示多少。
所以背景图的大小要和容器大小一致，尽量少用background-repeat，铺排。
为避免Firefox未定义高度产生的Bug问题，请调用下面的样式。
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
ul、li 图文混版，在Firefox中不显示，需给ul 设定浮动，定义成块，赋宽高值。
ul {
display: block;
clear: both;
float: left;
width: 390px;
height: 100px;
}
