收集：几个有用的CSS技巧
前几天在幸福收藏夹那看到一篇5+有用的CSS技巧的文章，一直想转过来收集下，前几天一直没有时间！当然自己还加入了一个这几天学到的很简单的技巧，跟大家分享一下，也是自己学习的一个记录吧！图片和链接我就也直接复制了，作者应该没意见吧？如有意见的话我就换哈！
1. 图像替换文本（给背景图片加超链接）
- #header h1 a{display:block;text-indent:-9999em;background:(images/logo.png) no-repeat 0 0;height:87px;width:250px;}
看得懂这个吗? 我看到很多们都LOGO都只是用图片代替，而没有链接。其他，只需要更简单的方法，利用图像替换文本的方法，显示LOGO，并拥有链接。各个值的功能
display:block; – a的默认状态是inline的，需要让它变成块状的，才可能定义高度和宽度，以适应LOGO的宽高。另外的一个功能是，让链接在text-indent后，在原区域可点击。
text-indent:-9999em; – 难道你想删除logo中的文字?这样应该是你的最后选择。因为这不符合语议标记，所以，也对搜索引擎不友好。而这个值就是让你的字体缩进到看不到的地方。让你不用删除文字。
2. display:inline-block;
在写sofished daily的CSS时，在顶站定日期的空间，就用了display:inline-block;顾名思义，就是在内联情况也的块状，可以设定高度宽度。
在GR看到一篇share讲了说到了跨浏览器显示这个显示display:inline-block的方法：
- .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)
- }
好处是什么? 好处就是不用使用float，在一行中显示设定宽高的元素。不过，上面提到的跨浏览器，貌似我在IE下依然可以显示，难道是IE tester的问题？
3. 用line-height垂直居中文字
你可能知道用text-align来让文字水平剧中，不过，却找不到更直接的方法来让元素垂直居。这里，或许你可以利用一下line- height。比如你要在导航中让文字简直居中于导航，可能会想到用padding和margin，不过，这时，烦人的IE可能会给你制造出麻烦，所以， 用line-height吧，这是一个更简单的方法：
上面这张图片的导航高度是28px，你可以给a设定这样的值：#navigation a{font-size:14px;line-height:28px;}，这样，就少去了用padding和margin的麻烦了。
4. 页面布局居中
你会发现，很多网站的布局都是剧中的。原因是方便浏览，对用户比较好？对于初学CSS的人来说，可能并不知道怎么做吧。很简单，就一句，假设你的布局的那个div壳是#wrapper：
- div#wrapper{margin:0 auto;}
这就是说，让上面没有margin，而左右自动适应，选择相等的宽度。这样就可以更好地在各个浏览器中表现了。
5. CSS缩写规则
CSS缩写，为什么？简单来说有两个好处。一，让你写代码更有效率，因为短；二方便修改，谁也不想对着一堆杂乱的代码发呆。貌似有很多人写过这个， 不过，这里，就重复一下吧。我并不想直接写出所有，这样文章看起来似乎特别长，就给你一个PDF吧，作者不是我，不过，一样的啦，只要你看得明白就OK 了：
Download/下载: CSS cheat sheet
6、用js输出不符合w3c标准和CSS，以通过w3c认证
这个还是前几天从Shawn那学来的！因为自己博客的皮肤用了fiirfox下才支持的圆角css样式，也就是-moz-border-radius，也就是评论那里，但这个样式在w3c认证时是无法通过的，这时用js输出就可以解决这个问题。具体方法如下：
我是建了一个js文件，然后写入如下内容：
- document.writeln("<style type='text\/css'>.commentlist li{-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}<\/style>")
中间.commentlist li的部分就是样式部分了，替换成自己的就OK！然后在头部文件中加载这个.js文件就OK了！顺利通过w3c认证！当然这种方法也适合于其它一些无法通过认证的CSS样式。
P.S. “喜欢本文？现在就把它分享到 Twitter 或者通过RSS关注本站的更新 ^ O ^ 。” — by edikud @ 09-10-25 - 13:19。转载请注明：来自eDIKUD'S Blog
