精简您的CSS样式代码
1.不起作用的单样式
有些CSS样式只针对特定显示水平的标签起作用。
①inline水平
inline水平的元素对很多CSS样式都不起反应，例如height/width, clear,
margin-top/margin-bottom, vertical-align,
overflow等。举个实例吧，拿overflow:hidden属性举例，对于inline水平的元素而言，设置overflow:hidden属性是没有作用的。例如下面的测试代码：
<span style="overflow:hidden;">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" style="margin-left:-5px;" />
<span>
对比于：
<span style="display:inline-block; overflow:hidden;">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" style="margin-left:-5px;" />
<span>
对比图如下：
您可以狠狠地点击这里：inline元素与overflow属性demo
②block水平
block水平的元素对vertical-align属性没有作用。
②组合起作用
有些样式需要和其他一些特定的CSS属性一起使用才有作用。常见的就是z-index与position属性的组合使用，left/top/bottom/right与position属性的组合使用。
2.组合样式中多余的CSS代码
这种情况就多了，实际情况下，牵扯到继承，命名冲突，书写等，这里仅仅举一些常见的多余样式的例子，相信您会在其中找到您自己的一些错误的。
a{display:block; float:left; margin-top:2px;}
这可以说是最常见的含有多余样式的例子了，开心网个人首页可谓随处可见，见下图：
这里的display属性完全没有必要，对于a或是span标签而言，没有任何理由使用display+float的组合，因为float所产生的“包裹”作用已经让元素如同一个inline-block水平的元素，这种作用大于直接的display设置。
仅仅一种情况下有必要使用display+float的组合，就是block水平的元素在IE6下的双边距bug问题，这种情况的唯一写法就是display:inline;
float:left;
margin-left:3px;一定要有与float浮动同方向的margin值，否则display:inline是多余的，可以直接去掉。
div{height:25px; line-height:25px;}
这又是一种常见的平时不注意的可以精简的CSS代码，这段代码高度与line-height值一致，通常作用是实现单行文字的垂直居中显示。但是实际上，很多情况下，这里的height是个多余的值，尤其在模块标题处。对于单行文字而言，您设置line-height多大，其实际占据的垂直高度就是多高，没有任何的兼容性问题，可以放心使用。
但是，有时候这里的height值是有必要的，什么时候呢？就是IE6/7清除浮动影响的时候，IE6/7下设置height值可以让元素haslayout从而清除浮动的影响，而line-height无此作用，还有就是其他一些需要layout的情况。
span{display:block; width:100%;}
div{width:100%;}
body{width:100%;}
这也是常见的使用多余CSS样式的情况，width:100%。在一般情况下，对于block属性的元素，width:100%这个属性绝对是多余的。默认的，block水平的元素就是宽度相对于父标签100%显示的。
当然，不使用100%的情况不是绝对的，下面这个组合可能使用width:100%是有必要的。
div{width:100%; overflow:hidden;}
在IE6/7（没有IE8）下，对于block水平的元素，我们可以使用width:100%清除浮动造成的影响，原因与上例一样，haslayout，除了这种情况，纯粹的{width:100%;}样式（无float或是position:absolute之类的样式）是不可能出现的。所以，如果您的CSS代码中出现上述情况，检查下您的width:100%是不是多余的。（下图为搜狐白社会动态列表中多余width:100%情况）
div{float:left/display:inline; vertical-align:middle;}
设置无用的vertical-align属性也是常见的。对于block/inline水平的元素或是设置了浮动属性或是absolute绝对定位的元素，其都不支持vertical-align属性。所以这些属性与vertical-align同时出现时，vertical-align属性不起任何作用是多余的。
例如人人网右侧的垂直菜单block水平的li元素：
或是淘宝新版首页左上侧的垂直列表：
我是实在想不出这里要使用vertical-align属性的理由。
div{position:absolute; left:0; top:0; display:inline; float:left; margin-left:10px;}
设置了绝对定位属性的元素相对特殊些，其不支持的CSS样式可就多了，首先对于display属性，完全没有必要，无论是block/inline-block/inline都是如此，除了现实隐藏外，没有任何组合使用的理由。absolute元素一旦设置了left/top这类定位值，margin属性也就失去了作用，浮动也无效。还有其他很多属性都不支持，例如clear，vertical-align等。
div{height:20px/width:200px; zoom:1; overflow:hidden;}
我们可能会使用zoom清除IE6/7（对IE8无效）浏览器下浮动造成的影响。但是对于IE6/7而言，如果您已经设置了高度值或是宽度值，那么zoom:1完全就是多余的，在IE6/7下含有定值的height或是width与zoom:1起到了同样的一个作用，就是使元素haslayout，可用来清除浮动产生的影响，所以，width/height与zoom:1同时出现也是没有任何理由的。
a{display:inline-block; *display:inline; *zoom:1;}
这是设置元素的inline-block属性，但是对于inline行内元素来说，后面的两个样式就是多余的，因为display:inline-block可以让inline水平的元素表现的就如同真正的inline-block水平一样。
所以，下图人人网样式代码中标注的代码就是多余的。如果是div，则需要上面完整代码。
