幸福收藏夹

对于投影的实现，其实有一个很好的方式，那就是利用 PNG 半透明效果。可惜，IE6 他不会让你这么做。当然，要实现的话，还是有可能的，只是，可能要绕很多圈。可是今天不是来绕圈的，而是来提供一个跨浏览器投影解决方案的。LOL。先来看一下效果：

块级元素：block-level，相信大家都知道吧（or Google it）。以前在写代码的时候，面对 <li /> 标签总觉得很奇怪。为什么它可以设定高度，但又不像 <h1 /> 这些元素，那种感觉就像它是个“半内联"的（内联：inline[text]-level）元素。HTML 4是这样描述的：

The following elements may also be considered block-level elements since they may contain block-level elements:

• DD – Definition description
• DT – Definition term
• FRAMESET – Frameset
• LI – List item
• TBODY – Table body
• TD – Table data cell
• TFOOT – Table foot
• TH – Table header cell
• THEAD – Table head
• TR – Table row

via: HTML 4 Block-Level Elements

分享一下今天在公司“半月谈”分享会上的一个KeyNote。没现场听，可能看内容会有地方找不到头绪。无论你想简单了解，还是深入学习，强烈推荐一下《解读 HTML5：建议、技巧和技术》这篇文章。

原文发表于：Alipay UED Blog – 打败 IE 的葵花宝典：CSS Bug Table

作为一名前端，我们通常要做的就是让页面在各系统A-Grade浏览器，甚至网站浏览份额0.1%以上的浏览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Opera etc. 这些浏览器的兼容，无不让前端们头痛。而在这之中，最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于占领了7、80%的领地。你想做一个统治页面兼容的主么？反正我是想的。

今天，趁着想完善公司的内部样式框架，把HasLayout.net的IE CSS Bug过了一遍。整理中收获了不少东西，一些官方的不足，也根据自己的知识升级了一下。当然，也顺利地升级了框架的一些内容，感觉甚爽。随后，便将一些值得去看的Bug整理成一个列表，基于Alipay前端伟大的分享精神，分享出来以供团队工友们和大家参考。

同时，由于整理仓促，有些理解和表达不当，以及其他纰漏在所难免，还请大家帮忙更正。谢谢。

Javasrcipt的 this 是个神奇的东东，其指向很难把握。不过，有一个原则，可是说是理解 this 的关键，那就是，它指的是调用函数的那个对象。看看这个例子：

function fn(){
    alert(this.ref)
};

var obj = {};

// 定义 ref
obj.ref = "hello world";

obj.fn2 = fn;
obj.fn2();

fn() 中的 this，指向的是 obj 这个对象，因此，ref 的值是 "hello world" 。

REF: The this keyword | Javascript 的 this 用法

想总结一下HTML5 的支持列表，写了许久，无果。在众多文章中，这篇文章涉及到了我想到的，以及没想到的。遂做粗略的翻译，因个人英文水平一般，本文FYI。原文请看：HTML5 Unleashed: Tips, Tricks and Techniques。

=====

现今我们能用 HTML5 吗，能用它做些什么呢，是否真的是 Flash 杀手？想必你也注意到了这些日渐增长且常被问起的类似问题，被讨论着，甚至被回答过。在我看来，你必须自己回答这些基本的问题。

这篇文章的本意是想帮你通过一些基本指南的学习，以轻松学习代码模板。一旦你熟悉了这些基本，并想更进一学习，你还将会找到更多提供了建议、技巧和技术的有用资源。

话说，对于去除虚线框，即使是一个前端开发工作者，也可能不知道所有的潜规则。因为很多情况下，它是一个视觉上的辅助，并且盲人们需要它（怎么个需要法，别问我），我们并不需要去掉。但在图片替换文字，或者虚线显示不规则的时候，去掉它对于一个产品来说会是更完美的。

如何去除虚线框

对于如何去除虚线框，有很多人推荐这样写：

a:focus, input[type=button] ,input[type=submit] {
        outline:none;
}

从这段代码来看，让我们小分析一下，有两点可能是需要我们注意的：