开发过程中将demo中的内容拆分进各子模块，发现之前好好的 hover 效果失效了，我排查的结果是因为在模块中没有定义doctype，页面默认使用 quirks mode，会导致非链接<a>标签的 hover 伪类在 IE7/8 和 firefox 均失去效果。
我们通常认为的非 IE6 以下浏览器都支持链接以外元素的 hover 伪类，其实还需要依赖 doctype，比如这样的代码就在 IE7/8 和 firefox 失去效果：
<html>
<head>
<style>
.hover-test:hover{color:#f00;}
</style>
</head>
<body>
<a class="hover-test" href="#">hover字体变红</a>
<p class="hover-test">hover字体变红,Quirks mode下失效</p>
</body>
</html>
从MSDN找到相关说法：
Internet Explorer 7 and later, in standards-compliant mode (strict
!DOCTYPE), can apply the :hover pseudo-class to any element, not merely
links.
而 Firefox 与 IE 也有区别，Firefox 下用标签名作为选择器可以使 hover 伪类恢复效用：
<html>
<head>
<style>
p.hover-test:hover{color:#f00;}
</style>
</head>
<body>
<a class="hover-test" href="#">hover字体变红</a>
<p class="hover-test">hover字体变红</p>
</body>
</html>
相关推荐：
html5 doctype与图片多余空白
doctype对盒子模型的影响
doctype, hover, quirks mode, 文档类型
使用 html5 的 doctype 代替很长很长的 xhtml doctype 似乎成了时尚和趋势，只需写寥寥几个字符：
<!DOCTYPE html>
简单易用，而且兼容性又不错，不过毕竟IE7和IE6还是不认识它，就会出问题…
doctype, html5, img, space, 图片空白, 文档类型
dotted和dashed是几个Border-style类型里面最常用又是最容易被混淆的，从字面上我们可以知道dotted代表点线，dashed代表虚线，不过是怎样的点线和虚线，我们无从得知。W3C也仅仅是从字面上对这两者进行了定义和解释，如同讲废话一样将解释权踢给了各浏览器开发商。浏览器混乱的给出自己的解释，其中“造就”的罪过，最终降临在WEB开发者身上…
border, dashed, dotted, transparent
tabindex 可以定义 HTML 元素的 tab 键选择顺序，默认不设置值，所以文档中的元素都是按照排列顺序选择的。
<!--缺省情况与tabindex="0"相同，此时按照顺序选择-->
<input type="text" name="" value="缺省" />
<input type="text" name="" tabindex="0" value="tabindex=0" />
<!--设置tabindex的值为1到32767，则按序号从小到大顺序选择-->
<input type="text" name="" tabindex="3" value="tabindex=3" />
<input type="text" name="" tabindex="2" value="tabindex=2" />
<input type="text" name="" tabindex="1" value="tabindex=1" />
<!--设为-1就可以禁用tab选中-->
<input type="text" name="" tabindex="-1" value="tabindex=-1" />
input, tabindex
之前有讲过 IE6 下多余的注释会引起浮动容器的字符复制BUG。根据这个原理，解决了不少相似的问题，不过今天碰到的却让我人很头疼，原因是这次出问题的是iframe。
废话不多讲，直接看代码：
[code=html]
[/code]
bug, comment, IE, iframe, 注释
浏览器处理错误源图片时会有不同表现:
不说废话了，比如
[code=html]
[/code]
假设图片不存在，火狐不会像IE一样显示叉叉，而是用alt中的文字完全代替图片的位置。如果我们对图片的尺寸有要求（假设50高50宽），这时候alt属性就会撑开这个宽度或者高度，破坏整体布局。
另：去掉DOCTYPE之后，火狐也能像IE一样，加上DOCTYPE反而不一致了，不知道是火狐刻意还是疏忽。
一个小技巧可以修复这种问题，简单的：
[code=html]
[/code]
alt, firefox, img, overflow
貌似有点火星了，前几天朋友找我抓个错误，HTML 结构很简单，我模拟一下^_^
<div class="wrap">
<div class="content">
1111
</div>
</div>
CSS 样式也很简单，我再模拟一下o(∩_∩)o…
[code=css]
body{
background:#000;
margin:0;
padding:0;
}
.wrap{
height:300px;
background:#f1f1f1;
}
.content{
height:50px;
background:#36c;
margin-top:100px;
}
[/code]
本意是要让content和wrap之间有100像素的外边距，HTML 结构和 CSS 貌似都完美的呈现了这个结果。 然而在FF里却完全不是这么回事:示例
collapsing, margin
发现豆瓣的头像裁切组件在 IE 下报错，换了 Chrome 才搞定。希望这是他们有意在抵制 IE！o(∩_∩)o…哈哈。正好想起了前辈们正在进行的一项计划，如果你也有一样的想法，就一起参与吧！！！
Drop ie6
让我们一起来抵制 IE 吧，Oh,应该是 IE6,为拯救前端开发工程师的生命，请放弃 IE6！
Twitter:http://twitter.com/dropie6
Website:http://dropie6.org/
dropie6
我们经常会为了达到某一共有的表现，定义一个通用的样式，比如<例1>
例1：
假设我们规定了用红色代表警告，于是定义
.red{color:#f00;}
表示红色前景色，在需要用到这个表现的时候我们就可以给相应元素添加这个 class.
<div class="red">红色字体</div>
这样做的好处是灵活、通用、而且省了很多麻烦。不过我们是否能够想到它的坏处是什么呢，想想 W3C 为什么不建议使用 <font>、<i>和 <b>标签吧;因为他们是纯表现的标签，没有任何语义。在看这个加上.red的 div，是否觉得它没有任何语义呢（除了知道这个 DIV 的前景色是红色，其他我们一无所知）！这么做其实等于我们自己创造了一个毫无语义的 <c> 或 <d> 标签。
css, 命名
