开发过程中将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, 文档类型
<embed>标签可用于在页面内嵌入 flash 文件，比较常见的就是在博客内嵌入视频，如嵌入世界杯主题曲：
<embed src="http://player.youku.com/player.php/sid/XMTU3NzUyMDUy/v.swf"
quality="high" width="480" height="400" allowscriptaccess="sameDomain"
type="application/x-shockwave-flash"></embed>
接到一个小需求：需要动态更新 embed 标签的 src 属性，拿上面的代码为例，很容易找到思路：
1.获取embed标签
2.setAttribute('src')
类似于对待 img 标签。
遗憾的是，此法对于 ie 浏览器并不奏效，给 src 加上时间戳也无济于事。
最后无奈用更新dom节点的方式才得以实现。
各浏览器在处理 embed 重载时并不尽相同，在此简单做了测试：Demo
测试结果：
Y：响应重载
N：不响应重载
| |
IE(6/7/8) |
Firefox |
Chrome |
Safari |
Opera |
| 重载(refresh movie) |
N |
Y |
N |
N |
Y |
| 更换(change movie) |
N |
Y |
N |
N |
Y |
| Display显示/隐藏 |
N |
Y |
Y |
Y |
Y |
| Visibility显示/隐藏 |
N |
N |
N |
N |
N |
| 设置innerHTML |
Y |
Y |
Y |
Y |
Y |
| Display hide > Change movie > Display show |
N |
Y |
Y |
Y |
Y |
embed, flash, reflow, reload, 兼容性, 标签重载, 测试, 浏览器
一、通配符选择器没有优先级
div{background:#f00}
*{background:#000}
前者优先级更高。
*.hello{color:#f00}
.hello{color:#000}
两者优先级一样，后来至上。
二、通配符选择器样式污染
#showEveryThing * {display:block}
将使 showEveryThing 内部所有元素显示为块元素，包括 <style> <script> <noscript>标签。这会破坏这些标签的本来面目，造成不必要的麻烦。
<style> <script> <head> 等元素本不可见，如果被强制加上样式，多多少少都会有问题，区别：
-
IE
不会输出内容，但可以控制边框。
-
非IE
基本可以当作普通元素对待，但不影响原有标签功能。如出现样式被修改情况，可以反方向重置。
因此，建议大家在使用通配符选择器时特别需要注意上下文环境，确认不会造成标签样式污染之后再使用
block, script, selector, style, universal, 优先级, 选择器, 通配符
问题及背景
今天项目组的开发同学急冲冲地叫上我看一个他写的JS脚本，好端端的一个form提交时参数无法正常传递。代码是这样的
<form method="get" name="xxx" id="xxx" action="uri?xxx=xxx&yyy=yyy" >
<input name="zzz" type="text" value="zzz" />
<input id="submit" type="button" value="提交" />
</form>
<script>
document.getElementById('submit').onclick = function(){
var form = document.xxx;
form.action = form.action +
(form.action.indexOf('?') > -1 ? '&' : '?') + form.zzz.value;
form.submit();
}
</script>
其本意是在提交是要同时提交xxx、yyy、zzz三个参数，但最终提交的参数只有zzz，即uri只是 uri?zzz=zzz。
分析
这是为什么呢？脚本没有问题呀，感觉方法也没什么问题，在调试了多次无果之后，我把注意点移到了form本身：在禁用了脚本之后，form同样只提交了zzz参数。
最后，终于知道原因是form使用了get方法。
HTML 4.01 specification 的解释
If the method is "get" - -, the user agent takes the value of action,
appends a ? to it, then appends the form data set,
encoded using the application/x-www-form-urlencoded content type.
The user agent then traverses the link to this URI. In this scenario,
form data are restricted to ASCII codes.
get方式是method的默认值，其方式是将form表单中的数据集值对组织到action中的uri之后，不过其组织方式是有讲究的：
- uri在submit最后才进行组织
- 在添加’?'时，uri中额外参数会被舍弃，接着只拼接表单内的域值
- uri hash值会被保留:uri?xxx=xxx#here，#here会被保留
form, get, post, uri
IE浏览器的条件注释虽不太常用，却异常强大，不仅可以用来区分IE浏览器版本
仅IE6:
<!--[if IE6]>
怎么该，怎么该……
<![endif]-->
仅IE7:
<!--[if IE7]>
怎么该，怎么该……
<![endif]-->
还可以牛13滴用来区分非IE浏览器：
<!--[if !IE]><-->
怎么该，怎么该……
<![endif]-->
关键是条件注释后头的 <–> 在IE中被当作内部注释，而在非IE浏览器中会闭合之前的注释，从而起到区分非IE浏览器的作用，一般常用<!–>。
conditional comments, IE, non-ie, 条件注释, 注释, 非IE
捣鼓 wordpress 时，发现系统里的星级评分的设计方式挺新奇也挺实用，特别是在图床挂掉时还能保持色块指示，在可访问性方面要比普通方法做的更好。
视点:
中部镂空，周围用背景色覆盖的背景图是这个设计的亮点，正好和常规背景图设计相反，很有想法。
将此图放大，可以看的更明白些：
正常状态：
设置其他颜色和透明度：
这种设计的好处在于
- 可维护性：方便星星的颜色定制，方便换肤
- 可访问性：图床挂掉时还有背景色做保障，CSS 未加载也能通过内部文字体现涵义
rating, 可访问性, 星级评分
使用 html5 的 doctype 代替很长很长的 xhtml doctype 似乎成了时尚和趋势，只需写寥寥几个字符：
<!DOCTYPE html>
简单易用，而且兼容性又不错，不过毕竟IE7和IE6还是不认识它，就会出问题…
doctype, html5, img, space, 图片空白, 文档类型
dotted和dashed是几个Border-style类型里面最常用又是最容易被混淆的，从字面上我们可以知道dotted代表点线，dashed代表虚线，不过是怎样的点线和虚线，我们无从得知。W3C也仅仅是从字面上对这两者进行了定义和解释，如同讲废话一样将解释权踢给了各浏览器开发商。浏览器混乱的给出自己的解释，其中“造就”的罪过，最终降临在WEB开发者身上…
border, dashed, dotted, transparent
随着网页内容的越来越丰富，网页的打开速度也越来越慢。拖慢速度的一个重要因素是Http请求太多，页面中普遍存在多个CSS文件和js文件要调用，还有需要请求很多图片和其他资源，即使按照优化http请求的宗旨去合并css文件和js文件，那也至少得有两个请求，图片采用sprite方法合并，不考虑sprite方式对内存的消耗（参考To Sprite Or Not To Sprite），页面也得多一个请求；至于内联的图片和其他资源，则无法进行请求数优化。就目前的淘宝网首页来说，虽做过优化，请求数还是多达80+（包含广告代码及一些异步调用请求），在YSlow的 Make fewer HTTP request 一项中只得到F的评价。貌似现在也没有什么更好的解决办法……
mozilla, resource, 浏览器, 资源包
