Hey! OCEAN here!

地震.css

html { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    zoom: 1;
}

http://www.stinkdigital.com/

http://www.zhangxinxu.com/wordpress/?p=1565

1. Gmail下，background:url()里的路径会被自动置空
2. Gmail下，div的height属性会被替换为min-height
3. Gmail下，所有position相关属性会被删掉
4. 支持margin

几次面试都被问到清浮动的问题，我就直接把经典的clearfix和bootstrap里看见的.clearfix()的mixin方法报了出来，但其实我写了这么都页面，从来都不知道清浮动到底有什么用，又不好意思说，问了不少人都没给我讲清楚，今天写页面时才终于明白，原来清浮动是用来防止浮动的子元素导致的父元素塌缩的…

一个div.body后有个div.footer，.body里两个div一float，.body高度就成0了，本来遇到这种问题我一向是一个overflow:hidden解决的，但这次里面子div里有个东西需要跃出父div形成样式，这是才发现原来清浮动就可以防止塌缩..

css很简单，所以也很混乱，写出不混乱的css是很困难的。

下面是写css写成精的人的笔记，link share：

支付宝团队： http://aliceui.com/alice-css/

CSS规范：

1.如果命名比较通用，比如 current，请限定在相应的上下文环境中。比如其父节点ID为#parent 等比较通用的命名，建议写成 #parent .current{}，而非 .current{}

2.作为JS接口的class或者ID，必须是以 J- 前缀开头的。除 JS 接口命名外，其他命名一律使用小写字母

3.强烈建议你使用更优雅的hack方式。那就是避免hack。或者在书写上，做点小trick。

4.css书写顺序：框架为先，细节次之，有因才有果

5.一定要有全局设置，一般情况下，不要直接给标签写样式

样式库构建规范：

1.不同外观的相同组件，HTML不要相互嵌套，CSS 推荐嵌套

2.在组件窗口最外一层添加状态，而非给每一个内容添加状态。除非内容有独立的状态

备忘一下：

background:#FFFFFF;
background: -moz-linear-gradient(top, #FFF, #E5E5E5);
background: -webkit-gradient(linear,top,from(#FFF),to(#E5E5E5)); 
background: -webkit-linear-gradient(top, #FFF, #E5E5E5);
background: -o-linear-gradient(top, #FFF, #E5E5E5);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFFFFF, endColorstr=#E5E5E5);/*IE6, IE7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#E5E5E5)";/*IE8*/

在IE里的渐变颜色里简写了个#FFF，结果最后显示出来时蓝色的….还是老实#FFFFFF吧

a slide: http://lea.verou.me/css3-secrets/#slide16

张鑫旭老前辈的详细说明：http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/

虽然是个不太常用的属性，opera和IE都不支持，但看了这个例子后觉得这个属性还是很有用的。

曾听很多人说过对付IE6，zoom:1是个神器，但我自己写了这么多得兼容IE6的网页，除了clearfix里就从未用过zoom，直到今天…

今天被一读研的师兄叫到他实验室里帮他改下他们做的点检系统的界面问题，由于他们的专业程度…各种框架、各种不闭合、各种style=”XXX”，不过他们的要求在IE里能用就行。我很早以前帮他们做过一个div布局的系统界面外观，这回他们把它改造成了框架布局，遇到的问题是一个iframe的宽度老是超出了一个containerDIV，个别页面又是好的，我坐了半个小时，width，overflow到处加都没用，就在我刷新页面时我发现页面有个瞬间是好的！我突然开始怀疑不是他们或我的代码有问题，而彻彻底底是IE6的问题，于是我按住ctrl，把鼠标滚轮往后一滚，再往前一滚，果然，他缩进去了…

原来我一直认为IE6不过是有些“个性”的渲染方式，这回让我第一次见识了它的BUG。

最后，给母级div加上zoom:1，传说中的触发haslayout了，虽然还是有几px溢出了，不过他们已经很满意了…