通过这些代码，你可以做出简单的Tooltip。这是CSS代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
a:hover {
background:#ffffff; /*要兼容IE6的话必须添加背景色*/
text-decoration:none;
}
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
} |
HTML代码如下：
hack是什么呢，它是用来针对浏览器在css解释上出现异常现象时，为了兼容各浏览器所使用的一种非常手段。
个人认为
一、应尽量避免hack的使用
很多人都存在一种投机取巧的观点——不兼容，用hack。因为这样省时省力。但这样下去，你永远都无法知道为什么这个浏览器比那个浏览器多出10个像素了，越来越多的不知道将导致你对css的迷惑。你将越来越依赖hack。
其实浏览器都已经很接近标准了，比如很多时候IE中的一些问题，都是由于hasLayout属性产生的，触发hasLayout便能顺利解决问题。又比如双倍距bug，加上display:inline就能解决问题了，并不需要用到hack来取掉那一倍的宽度。
投机取巧、为了省时省力而使用hack，将使csser对css、对浏览器特性（或者说是漏洞）的理解停滞不前！故，请应尽量避免hack的使用。
二、不要畏惧hack的使用
译者注：一篇很好的文章，很久以前在blog上就推荐过，这两天断断续续花了点时间翻译了一下，推荐读读。
英文原文在此。
http://www.satzansatz.de/cssd/onhavinglayout.htm
文中所有的 layout 这个单词都未作翻译，一来本身这个单词意思就比较多，翻成啥都觉得别扭，二来它也是专有的属性，所以就意会一下吧。水平有限，很多地方都是模模糊糊地意译，发现错误欢迎留言指出。
引用一段来自Dean Edwards
的评价：
I recommend that every CSS designer and DOM scripter read this. Understanding “layout” gives a huge insight into lots of other IE bugs and idiosyncrasies.
(Dean Edwards)
4月16日修订的内容：
将quirks模式这一部分单独移动到一篇文章中讲述。
添加：边缘裁切。
添加：收缩包围(shrink-wrapping)现象。
5月17日修订的内容：
重写了了浮动元素旁边的元素这一部分。
部分章节小的修正：属性，有关内联级别元素，CSS hacks。
重新整理了部分章节的语言：定义，数据，问题种种，分析，清除浮动和自动扩展适应高度，绝对定位元素。
On having layout
不论是对浏览者还是对搜索引擎，文字都是最佳的页面内容展示方式，但是，由于字体等原因的限制，纯文字的展示渐渐无法满足爱美的设计师的要求。
于是，出现了通过 CSS 来实现用图片替换文字的方法，这种方式既能实现页面上各种丰富的效果，又能满足搜索引擎优化的需要。因此，深受网页设计师的喜爱，本文介绍了几种常见的图文替换技术。
Fahrner Image Replacement (FIR)
这是最早出现的图文替换技术，是由 Todd Fahrner 提出的，非常容易理解：
HTML 代码：
<h2> <span>Hello World</span> </h2>
CSS 代码：
<style type="text/css"> h2 { background:url(hello_world.gif) no-repeat; width: 150px; height: 35px; } span { display: none; } </style>
代码非常明白：先将图片应用在 H2 的背景中，然后将 SPAN 的标签隐藏。但是这种方式有个问题，就是当图片无法显示时，将导致这个区域没有任何内容。同时，使用 display:none 的方式隐藏的内容，将被许多主流屏幕阅读器忽略，从而造成可用性问题，因此，应该尽量避免使用。
Phark 的方法
这种技术是由 Mike Rundle 提出的，好处是不需要额外的标签：
HTML 代码：
<h2> Hello World </h2>
CSS 代码：
<style type="text/css"> h2 { text-indent: -5000px; background:url(hello_world.gif) no-repeat; width: 150px; height:35px; } </style>
代码也非常简单，通过文本缩进，将文字隐藏，但是，当图片无法显示时，依然存在 FIR 的问题。
使用 line-height 垂直居中
line-height:24px;
使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。
清除容器浮动
#main {
overflow:hidden;
}
期前也提到过这样的问题，更多信息可以看这里。
不让链接折行
a {
white-space:nowrap;
}
上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。
始终让 Firefox 显示滚动条
html {
overflow:-moz-scrollbars-vertical;
}