[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]
我喜欢position:fixed，它很酷。
但ie6总不支持它，所以用其他的属性来模拟（这个模拟在主流浏览器中都兼容，所以其他浏览器也不需要分开写position:fixed了）。
看效果先：
提示：你可以先修改部分代码再运行。
这是基于这种方法做的对联效果：
提示：你可以先修改部分代码再运行。
原理如下：
提示：你可以先修改部分代码再运行。
把框框的高宽都扩大到100%，然后将雷打不动的文字定个位就行了。
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]
别看有的东东长得个表格样，其实是披着表格皮的无序列表，为了伟大的语义，我们需要用css实现表格外观的无序列表。
个人喜好，这里采用border和negative margin来实现，非常简单：
提示：你可以先修改部分代码再运行。
这是一个最简单的模型，然而，实战总是残酷的：
问题1：宽度如何自适应分辨率？
这个问题也许有人说没必要，但是在模块化设计时，几乎任何部件都被要求设置为宽度自适应模式的。
解决1：参考完美的firefox3和ie8百分比宽度处理方案，给剩余的宽度分配给某个“列”，就行了 ^-^
记得二列等高的笨办法吗？——用背景图片模拟。
提示：你可以先修改部分代码再运行。
问题2：单元格内容过多、形成换行如何处理？
解决2：隐藏吧，它已经没有存在的价值了！（ - -! 其实是我想不出别的办法来了）
但为了体验好一点，我加上了text-overflow。这个，FF暂时不支持……aoao有好的解决办法，我也有次点的解决办法和一个完美的解决办法（目前YY中，且仅FF3.5支持）。
提示：你可以先修改部分代码再运行。
问题3：5×4的表格，如果只有17条数据怎么办？empty-cell也黯然失色…
看这个Demo，其实我觉得这个样子不影响阅读，也不难看了，可Boss和他的Money不乐意。
提示：你可以先修改部分代码再运行。
解决3：
首先让我们制造出我们想要的表格（很遗憾，制造了很多空标签，暂时没有找到更合适的纯CSS解决方案，欢迎大家多多指点）。
提示：你可以先修改部分代码再运行。
然后用position:relative实现css移魂大法：
提示：你可以先修改部分代码再运行。
然后让我们隐藏多余的那一行：
提示：你可以先修改部分代码再运行。
幸亏不畏强暴地贴到蓝色去挨批了，现在不用空格了，谢谢birdstudio的思路，要能去掉span就完美了。哦米陀佛，天上赶紧掉个
提示：你可以先修改部分代码再运行。
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]
这次给云南移动网上营业厅做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。^-^
早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参阅。
废话不多说，咚咚咚，开始制作啦！！！
除了IE6这个坚强的孩子，其他浏览器攻克还是比较容易的。
提示：你可以先修改部分代码再运行。
该实例完成大概就两个要点：
1. 忌浮忌躁，一步步来，先把最低级的display:none;掉。
2. “:hover伪类”的使用，默认状态“display:none;”，“:hover”时则“display:block;”则能很容易完成。
而IE6下折腾就比较复杂了，经过头破血流的教训之后，总结出关键四点：
1. 原理：IE6仅<a>标签支持:hover伪类，但如果a标签里面再嵌入a标签，里面的a标签将不会生效，所以必须在之间套加一层<table>；
2. 关键样式名：这个用于:hover效果的a标签的命名，如果使用与<li>一致的样式名（在非IE6中是li:hover产生的效果），将不用再另写样式代码，不仅节省了代码开销，而且可维性更好；
3. visibility的使用：采用display的话将出现onmouseout时上一次显示的optionGroup仍然不消失的情况
4.table的设置：[含泪ing]table一定要记得width:100%;啊，一定要记得啊，一定要记得啊，一定要记得啊……
最后完成效果：
提示：你可以先修改部分代码再运行。
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]
像素都是单个单个显示的，绝对不会出现半个像素，那么0.63px这样的定义经各浏览器渲染之后得出什么样的结果呢？
经过偶不厌其烦的例举分析，得到以下结果并经过了一次验算，第二次验算在实战中用到它再说吧。
这个结果能用到什么场合呢？恩，我也不知道。囧rz。
但我相信既然有差异肯定就能起到hack的作用。可不要小看一个半个的像素，有时候它能起到很关键的作用，这个差异最大的特点就是几乎每个浏览器之间，均存在该差异。
一点说明：一般精确到1/1000就能看出各浏览器之间的差异，这里采用直接进一法来精确到1/1000。
border
IE6/IE7 | 1.000 = 1
OP9.6 | 0.995 = 1
Chrome2 | 0.990 = 1
SF3 | 0.98999998 = 1
IE8 | 0.010 = 1
FF3 | 0.009 = 1width
IE6/IE7 | 1.000 = 1
OP9.6 | 0.995 = 1
SF3 | 0.991 = 1
Chrome2 | 0.990 = 1
IE8 | 0.510 = 1
FF3 | 0.492 = 1margin负值
IE6/IE7 | 1.000 = 1
OP9.6 | 0.995 = 1
Chrome2 | 0.990 = 1
SF3 | 0.98999998 = 1
FF3 | 0.509 = 1
IE8 | 0.500 = 1margin正值
IE6/IE7 | 1.000 = 1
OP9.6 | 0.995 = 1
Chrome2 | 0.990 = 1
SF3 | 0.98999998 = 1
IE8 | 0.510 = 1
FF3 | 0.492 = 1padding
IE6/IE7 | 1.000 = 1
OP9.6 | 0.995 = 1
Chrome2 | 0.990 = 1
SF3 | 0.98999998 = 1
IE8 | 0.510 = 1
FF3 | 0.492 = 1
其中有几种比较特殊的情况：
[IE8/border：如果border-left与border-right同时存在，border-width:0.010时对width宽度造成影响，小于既定宽度2px，0.510时小1px，0.760时恢复正常。]
[IE8/padding：如果padding-left与padding-right同时存在，padding:0.260时出现right & bottom边框，0.510时出现top和bottom边框，0.760时才两者同时出现。]
[FF3/padding：如果padding-left与padding-right同时存在，padding:0.242时出现right & bottom边框，0.492时出现top和bottom边框，0.742时才两者同时出现。]
【几个属性同时使用时的情况太复杂了，FF简直寻不着规律，IE8还好点，以下举个例子，就不继续深入探讨了】
以IE8为例，padding和margin同时使用小数时：
设padding-left:0.510;（单独使用padding-left时，IE8下，0.510=1） margin-left:1px;为正常状态。
margin-left则不能使用小数，否则小数部分无效。
如果padding-left:0.520，margin-left则可使用49.99px。
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]
自古多情空余恨——这话太适合形容我此时此刻的心情，IE6/IE7这俩自作多情的浏览器经常让我愤恨不已。
这故事、这bug是这样的：
默认的按钮我不爱它，所以我想给它一个我觉得漂亮的背景，但是长度又不一致，所以就加个border，然后弄个可以repeat-x的background-image。
结果：IE6/IE7出现了1px的白色内边框。
提示：你可以先修改部分代码再运行。
^-^ 改变了一下body的背景，发现原来这个内边框其实不是白色的，而是透明的。
提示：你可以先修改部分代码再运行。
唔，幸亏是透明的，于是解决方案很快就找到啦：
提示：你可以先修改部分代码再运行。
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]
[float:left]有个伟大之处，它使div（或者其他标签）的宽度自适应其内容，但它却有个弊端：无法居中。
[display:inline-block]也有同样的特性，并且可以居中，但连续几个这样的东东，之间却会出现空格。
为了解决这个问题，我们可以把二者结合起来使用：
提示：你可以先修改部分代码再运行。
当然，这样的结构是不正确的，但是我们可以模拟一下（模拟方法的详情请见怿飞的文章：模拟兼容性的 inline-block 属性）
提示：你可以先修改部分代码再运行。
联动下拉是一个很多地方都要用到的实用功能，使用createEvent创建并调用下拉框的onchange事件可以减少代码的冗余度，并且在多个下拉框数据同步刷新时使用比较简单清晰的代码结构实现多层事件联动。
示例代码：
提示：你可以先修改部分代码再运行。
在这个例子中，后两个下拉选择框的值都会根据前一个下拉选择框值的改变而改变，可以使用类似的办法实现更复杂的功能，比如使用ajax来异步填充数据等
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]
问这样的问题的人很多，我对此有比较深入的研究，但自己从来没有给出过完整的解答与分析，觉得有些对不住样式界的列祖列宗。
先请看demo：
提示：你可以先修改部分代码再运行。
通过css的结构大家应该不难看出，这里采用了ie6最基本的hack来区分ie6与其他浏览器来实现这个效果。
那么本教程也将分而述之。
撇开ie6，我们看这个demo：
提示：你可以先修改部分代码再运行。
大家看到，此时div的实际高宽，完全由left / right / top / bottom这四个属性所掌控着，于是我们便可以借助这个特性，轻松地完成div仿框架的效果了：
提示：你可以先修改部分代码再运行。
让我们将应该有滚动条的地方的滚动条效果折腾出来：
提示：你可以先修改部分代码再运行。
以上方法其实早已由wiseinfo在Html+CSS 构建 B/S结构软件界面 — 布局篇 — position方式中进行过介绍，在该文中，ie6亦是分而治之的，它的方法是在html代码顶部加入“<?xml version=”1.0″ encoding=”UTF-8″?>”，使得ie6进入quirks mode（怪异模式）来完成ie6下的div仿框架，但这样做将出现一些影响比较显著的弊端：
1. quirks mode下的ie6连盒模型都变了，就是说你在页面中写任何内容就要慎用padding和border，况且quirks mode下的变化还不止这一点。
2. 如果底部使用绝对定位，则会发生“绝对定位基对象（在此为body）高度为偶数时，出现1px空隙”的bug。
提示：你可以先修改部分代码再运行。
于是我们需要另辟蹊径。
在很多次失败之后，我终于发现有一个标签可以救ie6于水深火热，那就是最伟大的“<html>”标签，它继承了ie6 quirks mode（怪异模式）下的盒模型状态。
提示：你可以先修改部分代码再运行。
利用这一点，我们可以在不太轻松的调整之后完成以下效果：
提示：你可以先修改部分代码再运行。
再用下我们的二列布局知识来完成最终形态，在此我们将艳遇著名的3px bug：
提示：你可以先修改部分代码再运行。
现在我们拥有了ie6的仿框架和非ie6的div仿框架的最终形态，只需要利用hack做个简单的加法则行了：
（当然，同一属性写两遍，后面的属性所对应的值将覆盖前者，这个基础的优先级基础大家还需要温故一下。）
（再“当然”一下——当然，有人对hack深恶痛绝，那么请在使用之前，阅读此文看看是否能消消心头之恨。）
提示：你可以先修改部分代码再运行。
它很强大而实用，真的：
提示：你可以先修改部分代码再运行。
以下是09-05-09的补充
但在实际应用中主体部分常常是个iframe，加个iframe，IE7则无法适应。T_T
提示：你可以先修改部分代码再运行。
而且……其实IE7下还不止这一点bug（虽然可以直接overflow-y:scroll，但我于心不忍）。
提示：你可以先修改部分代码再运行。
所幸IE7和IE6的html标签有着相同的盒模型，所以可以直接将IE6 only的部分修改为IE6+IE7 only。
提示：你可以先修改部分代码再运行。
iframe无法适应高度的bug也一起被修复了，人生真美好。
提示：你可以先修改部分代码再运行。
续集完，谢谢观赏。
以下是09-05-24的补充，在KentXD的细心测试下，该方案在ie6下又出现了惊喜：
当bottom部分存在文字的时候，从bottom部分跨越至main部分一直选定，当选定状态仍保持的时候，最大化 / 还原窗口，页面整体向上移动了n个像素，貌似*padding:70px 0;失去了作用。
提示：你可以先修改部分代码再运行。
^-^ 好在改变position的属性为absolute之后，该bug顺利修复：
提示：你可以先修改部分代码再运行。
又一篇续集结束，谢谢Kent。
这是一个极具争议的话题，此帖仅代表个人观点，希望能借此抛砖引玉，大家能谈谈各自的想法，予老鸟以谈资，予新手以借鉴。
hack是什么呢，它是用来针对浏览器在css解释上出现异常现象时，为了兼容各浏览器所使用的一种非常手段。
个人认为
一、应尽量避免hack的使用
很多人都存在一种投机取巧的观点——不兼容，用hack。因为这样省时省力。但这样下去，你永远都无法知道为什么这个浏览器比那个浏览器多出10个像素了，越来越多的不知道将导致你对css的迷惑。你将越来越依赖hack。
其实浏览器都已经很接近标准了，比如很多时候IE中的一些问题，都是由于hasLayout属性产生的，触发hasLayout便能顺利解决问题。又比如双倍距bug，加上display:inline就能解决问题了，并不需要用到hack来取掉那一倍的宽度。
投机取巧、为了省时省力而使用hack，将使csser对css、对浏览器特性（或者说是漏洞）的理解停滞不前！故，请应尽量避免hack的使用。
二、不要畏惧hack的使用
经常见到有人高声呼吁：千万不要使用hack，要做无hack安全绿色界面。
我认为，这种过分极端的观点是错误的，这是一个误区。hack以及私有属性之所以被人挖掘并为高手所研究，正是因为它有其不可替代的价值。
在一些特殊的情况下，不使用hack根本没有办法解决问题，比如要一个按钮上的文字在各主流浏览器中完美地垂直居中，如果没有hack，你能做到吗？比如css仿框架，不使用hack，你能做到吗？当然，你会说你不需要做到那么极致，但亲爱的，老板要。但亲爱的，你能做到更好，为什么不呢？
你说不要用它，那就是因为它有弊端了，忌用hack的人有何顾虑呢？目前我所听到的声音都属于以下三种：
1. 向后兼容问题（就是说你的页面ie8兼容了，在ie9下搞不好因为你使用的hack而错乱）
不可否认，类似的悲剧确实存在。ie6向ie7过度的时代，important声明大概害惨了一批人，ie7继承了ie6的很多bug，但却完全支持了用于ie6 hack的important声明，于是用important根本无法区分ie7和ff2。
但——但——但——在你使用hack的时候去预测一下是否再出现这样的情况，便可知hack用不用得了。简单例举一下：ie6有3px bug，我用“_margin-right:-3px”来解决，这个下划线+属性的写法仅ie6支持，ie7不支持，其他任何浏览器都不支持。按照标准的发展趋势来看，今后会有浏览器支持吗？今后会还浏览器出现这么极品这么囧的3px bug吗？这样的hack，不过是以ie6本身来制ie6本身，并不会对其他浏览器及其之后的浏览器造成影响。
2. 如我之前所陈，使用hack可能致使csser依赖hack。
这样的问题其实完全事在人为，不依赖hack很简单，我不去依赖就行了——尽、量、避、免、使、用、hack！
3. 无法通过标准验证。
乖乖，标准验证是为了什么呢？是为了让你所写的样式更加符合标准，你知道如何去标准就行了，浏览器并不标准的时候，我们还要钻破脑袋了去按照标准的方法做事。别傻了孩子，你会把制定标准的人活活气死的。
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]
一个电影图标（我觉得叫“海报缩图”不动听），鼠标滑过时显示它的名称和简介，这样的效果做起来很容易，稍稍利用:hover伪类便可实现。
提示：你可以先修改部分代码再运行。
然而这样的图标通常是成组出现的，于是就出现了一个问题：当鼠标滑过时，显示出来的详细信息将遮住其他的图标，从而使得“:hover”无法顺利触发。
提示：你可以先修改部分代码再运行。
要解决这个问题，关键在于如何使得现在被遮住的这个<a>也能触发:hover。
=> 被遮住的<a>能触发:hover吗？不能！
=> 那么现在问题转化为：如何使得现在被遮住的这个<a>不被遮住。
=> 事实上：<a>的一个子元素不被遮住即可。
=> 加一个透明的子元素便能实现了。
思路图（3D的也，透视的也，我真牛 ^-^）：
提示：你可以先修改部分代码再运行。
（编者按：炫不炫？好炫！——鼓掌。）
这是一个比较复杂的效果，在兼容性上还是存在一些问题，所以需要作情处理，其细节请参见demo中样式表的注释。
该效果的产生离不开对“层的叠加”的理解，如对此有疑问，请参阅我的相关文章：理解五条叠加法则，自由使用层的叠加
最新评论