最近半年忙得不可开交，工作上有些意料之外的进展。
原本应该在秋雨里发出的文，结果便积压到春雨时分了。
碎片化的生活方式，也让我更倦于静心产出，需反思。
1、使用原生方法在页面头部插入外部 JS。
用 jQuery 的 $.getScript() 可以异步加载外部 JS，
而原生方式如下：
document.head.appendChild(document.createElement('script').setAttribute('src','http://ex.com/javascript.js'));
2、使用原生方法为元素增加类名。
用 jQuery 的 addClass() 是最直白的，
而原生方式如下：
var d = document.getElementById("div1"); d.className += " otherclass";
3、解决 iOS 无法使用视频作为背景。
出于用户体验考量，苹果禁止在 iOS 浏览器上自动播放视频，
因此需要通过判断 user agent，然后用 canvas 播放器替代原生 video。
4、解决 firefox 无法使用跨域嵌入字体。
这是 firefox 的安全限制导致的，访问者可以在 about:config 内，
调整 security.fileuri.strict_origin_policy 设置；
而服务器则应在配置文件（.htaccess）增加跨域支持：
<FilesMatch "\.(ttf|otf|eot)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>
5、解决 Sublime Text “Material Theme” 看不到输入面板。
“Material Theme”是我非常喜欢的一款 Sublime Text 主题，
唯有一个小问题困扰：选择改名时看不到面板，只能盲打，然后回车。
这简直是不可理喻的“缺憾”，一番搜索后，发现有人遇到了类似问题。
面板并不是消失了，只是贴在底部，高度为零，鼠标移上去，拉高即可。
（可能是频繁切换不同主题导致的~咩）
6、创建仅适用 IE9 以下的代码/样式。
为了兼容性考虑，我们往往有为该死的低版本 IE 写 hack 的需求。
古老的 IE9 以及以下的版本都可以在注释中加入 [if IE] 来特殊处理：
<!-- Target ALL VERSIONS of IE --> <!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> <!-- Target everything EXCEPT IE --> <!--[if !IE]> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]--> <!-- Target IE 7 ONLY --> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]--> <!-- Target IE 8 and LOWER --> <!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> <![endif]--> <!-- alternative --> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> <![endif]--> <!-- Target IE 7 and HIGHER --> <!--[if gt IE 6]> <link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> <![endif]--> <!-- alternative --> <!--[if gte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> <![endif]-->
7、在 Excel 单元格内回车。
要想单元格内容回车，而非完成编辑并跳向下一格，
需要在 enter 的同时，按下 alt。
8、低版本 IE 的透明处理。
在进入现代浏览器之前，IE 使用私有的 filter 进行透明过滤（alpha 通道）：
<div style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);"></div>
9、变形图标字体。
一般的图标字体默认为 display:inline，这样是无法进行变形（transform）的。
需要将其样式改为 display:inline-block 后，就可以很方便地进行处理啦！
10、消除 inline-block 隐藏溢出后的错位。
我们为 display:inline-block 的元素增加 overflow:hidden 后，
会发现它的高度/位置与预期可能有所差异，有一定向上偏移。
这时需通过设置 vertical-align:bottom 进行对齐。
【相关资料】
0、xtinehlee – beans! ◃ flickr（题图）
