任平生的学习笔记

IE 中按后退按钮页面乱码的解决方案

2012-01-11T18:40:00.000+08:00

今天遇到一个问题，退出登录后，点IE浏览器的后退按钮，页面出现了乱码，查看页面编码变成了 GB2312。
找了一圈也没找到问题所在。不过找到一个类似的解决办法，就是判断当前页面编码是否为 utf8，如果不是，则刷新页面。
代码：

<script type="text/javascript">
try{
 if ((document.characterSet || document.charset).toLowerCase() != 'utf-8' && navigator.userAgent.indexOf("MSIE")>0){
  window.location = window.location;
 }
}
catch (exp) {}
</script>

ol 有序列表序号的倒序

2011-12-28T00:00:00.000+08:00

今天看了这篇的文章，才知道原来 OL 有序列表还可以定义序号的起始数字呢。不过在 HTML4 规范中是被废弃的，但「神奇」的是浏览器却都支持这个属性。于是，你懂得，在 HTML5 中它就又重新被纳入规范。并且，在 HTML5 中为有序列表增加量了一个新属性：reversed 。通过 reversed 属性来定义列表序号为倒序，比如：100，99，98……

通过 start 属性定义有序列表的开始序号：

<ol start="100">
 <li>list item one</li>
 <li>list item two</li>
 <li>list item three</li>
 <li>list item four</li>
 <li>list item five</li>
</ol>

显示效果：

直接通过 value 定义序号

<ol>
 <li value="100">list item one</li>
 <li value="101">list item two</li>
 <li value="102">list item three</li>
 <li value="103">list item four</li>
 <li value="104">list item five</li>
</ol>

可以达到上例同样的效果。

新增的 reversed 属性：

<ol reversed>
 <li>list item one</li>
 <li>list item two</li>
 <li>list item three</li>
 <li>list item four</li>
 <li>list item five</li>
</ol>

理想的显示效果：

可惜， reversed 目前还不被任何浏览器所支持。

故，现阶段我们可以使用 js 给每一个 li 添加 value 的模式来模拟实现，这里有 Louis 提供的一个示例： http://jsfiddle.net/ImpressiveWebs/h4JcL/

IE10 的 HTML5 怪异模式

2011-12-16T00:02:00.000+08:00

微软将 IE10 中默认的怪异模式称之为： HTML5 怪异模式（HTML5 Quirks Mode），一方面它遵循 HTML5 定义的渲染规则，同时也遵守怪异模式的渲染规则。在以下两种情况，IE10 会进入这种 HTML5 怪异模式：

一、没有文档声明
二、使用传统的 HTML文档声明

此外，当今的现代浏览器（Firefox，Chrome等），在即使没有文档声明的情况下，也会以（准）标准模式渲染页面。这次，IE10也开始遵循此点。这样就保证了没有文档声明的网页在所有浏览器中渲染都是一样的。

当然，我们伟大的微软，向来以周全考虑为己任为首要任务的微软，为了兼顾那些不规范的网页，又搞出了一个 IE5 兼容模式，以这个模式渲染的页面就是以往 IE 的怪异模式（工程师们你伤不起的啊）。

开启这个模式的代码是：

<meta http-equiv="X-UA-Compatible" content="IE=5">

（喂！没有文档声明的网页还有人维护吗？还有人维护吗？维护吗？吗？）
（另外，这样那些无人维护的页面岂不是在 IE10 下边渲染会像当初的 Firefox 吗，微软你考虑的真的周到吗）

来源：http://blogs.msdn.com/b/ie/archive/2011/12/14/interoperable-html5-quirks-mode-in-ie10.aspx

人民币符号 ¥ 一横还是两横的问题

2011-08-15T18:36:00.001+08:00

今天在看嗷嗷博客的时候又看到了这个问题，关于人民币符号到底是一横还是两横，根据人民币（100或50）银线上印的符号可以确定这个符号应该用两横的。

恩，接下来，回顾一下为什么会产生这个问题。

我们一般是这样打出这个符号：中文输入状态下，shift+4 ，出来的就是￥。

这个字符 Unicode Character Code 编码是：FFE5（字符实体 &#65509），在使用 simsun，arial, tahoma，verdana 字体时显示的都是一道杠的模样￥。
所以，对于中文用户来说，默认看到的可能都会是一横的符号 —— 因为中文用户系统默认字体是宋体/Arial —— 这就让大家产生了一种错觉，以为一横的符号才是正确的。（需要注意的是，在 IE8+， Chrome 上， arial 字体的￥也表现为两横）

但是，如果对这个字符使用微软雅黑（Microsoft YaHei），华文细黑（STXihei），細明體（MingLiu）字体时，这个字符又表现出了两横的生命体征￥，纠结的人民币符号，你伤不起啊。

好吧，直接打出来的字符这么纠结的现状，那么我们用标准的人民币符号，其实呢，人民币符号是“山寨” 日元符号 ¥ 来的，所以，我们可以用这个日元符号的字符实体 ¥ 来实现统一的两横。

¥ 的 Unicode Character Code编码是：A5 ，看着牛逼闪闪的编码就可以知道这货绝对是正品 ANSI 编码，不是 Unicode 扩展出来的山寨版。

使用字符实体 ¥ 在包括 simsun, arial 等字体下都能轻松显示两横无压力。

有个特例就是 tahoma 字体，无论是用 ¥ 还是 ￥ 都显示为一横： ¥ ，彻底的伤不起了～

综上，建议使用 ¥ 来表示人民币符号，字体避免使用 tahoma 字体。

HTML5: element.classList API

2011-06-10T17:31:00.001+08:00

element.classList 将会返回 element 的 class 信息

element.classList:

{
length: {number},
add: function(){},
remove: function(){},
toogle: function(){},
item: function(){},
contanis: function(){}
}

<div class="c1 c2 c3" id="ele"></div>

var ele =document.getElementById('ele');

ele.classList.add('c4');
ele.classList.remove('c2');
ele.classList.toggle('c3'); //移除 c3
ele.classList.toggle('c3'); //添加 c3
ele.classList.contains('c1') // true
ele.classList.contains('c5') // false

ele.classList.contains.itme(0) // c1

使用 toggle 时候，如果class不存在，则增加这个class

检测浏览器是否支持 classList:
'classList' in document.createElement('a') // true 为支持

浏览器支持状况：
Chrome 8+, Firefox 3.6+, Opera 11.5+ , IE 和 Safria 不支持

参考链接：
http://davidwalsh.name/classlist
https://developer.mozilla.org/en/DOM/element.classList

HTML5: element.dataset API

2011-06-10T16:28:00.002+08:00

Firefox 6 中将增加一个新的 API： element.dataset 用来获取自定义数据属性 data-* 设置的值。
如果使用这个 element.dataset，那么 data-* 的命名需要有以下几点注意：

名字不能以 xml 开头
名字中不能使用分号
名字中不能包含大写字母 A-Z

自定义数据属性将遵循以下规则转化为 DOMStringMap 键值：

中划线 - 将被移除；
跟着 - 的所有字母将被转化为大写（即驼峰命名）

代码：
<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>

var ele = document.getElementById('myDiv');

ele.dataset.id // myId
ele.dataset.myCustom.Key // This is the value
ele.dataset.newKey = 'rpsh' // 将会增加 data-new-key="rpsh"

<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value" data-new-key="rpsh"></div>

注：Chrome 8.0, Opera 11.1, Safari 6 已经支持该 API。IE 尚无版本支持

参考链接：
http://davidwalsh.name/element-dataset
https://developer.mozilla.org/en/DOM/element.dataset

javascript keycodes 键盘键值

2011-06-08T17:59:00.001+08:00

图片来源：http://shikargar.wordpress.com/2010/10/27/javascript-key-codes/

在页面上增加键盘快捷键：

var inputFocus = false;
$(':input').blur(function(){
inputFocus = false;
});
$(':input').focus(function(){
inputFocus = true;
});
$(document).keydown(function(e){
if(!inputFocus){
if(e.which == 87 && !e.ctrlKey){
//do something
return false;
}
}
});

自定义有序列表 li 项目符号的数字样式

2011-05-27T17:07:00.001+08:00

下面是一个自定义有序列表 li 项目符号样式的思路：

<ol>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ol>

CSS:

ol{
margin-left:0px;
padding-left:0px;
counter-reset:li;
}

ol > li{

position:relative;

margin:0 0 6px 2em;

list-style:none;

}

ol >li:before{

content:counter(li);

counter-increment:li;

position:absolute;

color:red;

}

实现关键点就是 ol 的 counter-reset:li ，和使用 before 伪元素的 count:counter(li) 和 counter-increment:li 来实现添加出递增数字。

然后，就可以随意定义 before 伪元素的样式了

参考链接： http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/

HTML5 Shiv 的一些趣事

2011-05-25T11:15:00.002+08:00

我敢肯定，你一定没听说过 Sjoerd Visscher 这个名字，虽然你天天在熟练地用着 HTML5 Shiv 去修复 IE 不能识别未知元素的bug。

2002年，荷兰海牙。 Visscher 在改进 XSL 的显示样式的过程中发现，非HTML元素不能应用CSS样式。

2008年，HTML5 已经出现了，一些新的元素被提出并应用，但是 IE 6-8 不能识别未知元素，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。这个悲剧的现实将 HTML5 的实际应用拖入寸步难移的泥淖当中。

这时候， W3C HTML工作组的联合主席 Sam Ruby 在他的 Blog 上收到了一条 Sjoerd 的评论：（2008.01.22）

Btw, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist

在IE中，如果你想将 CSS 样式应用在未知元素上，只需执行 document.createElement(elementName) ，如此这般后，CSS引擎就能识别这个元素了。

HTML5 规范的主编，Ian Hickson 被这个鬼斧神工般的技巧给震撼了，然后激动地说：这项技术扫清了通往HTML5大路上的最大障碍，让在 IE 上兼容实现HTML5指日可待。

一天后，John Resig 就写了一篇文章，并创造了 "HTML5 Shiv" 这个词。嗯，准确地说应该叫做 shim，John随后也承认了这是一个拼写错误。但是 HTML5 Shiv 真的像一把尖刃(Shiv)斩开了拦在 HTML5 大道上的荆棘。

HTML5 Shiv 简史：

2009.01 Remy Sharp 创建了第一个让IE支持 HTML5 标签元素的脚本
2009.06 Faruk Ates 在 Modernizr 中引入 html5shiv
2010.02 众多 Javascript 大牛，Remy, Kangax, John David Dalton 和 PorneL都参与进来优化这段脚本的大小
2010.03 Mathias Bynens 等人发现 shiv 在打印页面并不能生效，那一天是相当滴灰暗，不过也激发了开发者的斗志去挑战这个难题
2010.04 Jonathan Neal 带着 IE Print Protector (IEPP) 成功挑战了这个难题，巧妙地使用 onbeforeprint 和 onafterprint 事件将 shiv “运用”在了打印页面上
2010.04 Remy 发布了带 IEPP 的 html5shiv
2011.02 IEPP 的接力棒传到了 Alexander Farkas 手中，他将项目转移到 github 上，添加了测试套件，修复bug，改进性能
2011.04 IEPP v2 发布，Modernizr 和 html5shiv 也跟进引入了最新版。

最后，为 HTML5 Shiv 添砖添瓦的人有：Sjoerd Visscher, Sam Ruby, John Resig, Remy Sharp, Faruk Ates, Kangax, John David Dalton, PorneL, Mathias Bynens, Paul Irish(本文作者), Jonathan Neal 以及 Alexander Farkas

原文：http://paulirish.com/2011/the-history-of-the-html5-shiv/

判断浏览器是否支持某个css属性

2011-05-20T18:14:00.000+08:00

根据 UA 来判断浏览器版本，再根据浏览器版本来确定是否支持某个 css 属性的方法弱爆了，直接判断浏览器是否支持某个CSS属性才是王道。

判断是否支持 text-overflow
if( 'textOverflow' in document.documentElement.style){
alert(1);
}else{
alert(0);
}

判断是否支持 text-shadow

if( 'textShdow' in document.documentElement.style){

alert(1);

}else{

alert(0);

}

从上可以看出，CSS属性，采用首字母小写的驼峰命名法。

一些 CSS3 属性需要有浏览器厂商前缀，对于这些属性的判断方法：

判断是否支持 transform

if( 'MozTransform' in document.documentElement.style || 'WebkitTransform' in document.documentElement.style || 'OTransform' in document.documentElement.style || 'msTransform' in document.documentElement.style){

alert(1);

}else{

alert(0);

}

我们可以注意到，除IE外，各个浏览器使用首字母大写的厂商前缀的开头，IE则用小写的 ms 开头。

如果不知道某个CSS属性在 DOM 中的名字，可以在下面这些网址查找

IE: http://msdn.microsoft.com/en-us/library/ms533055(v=VS.85).aspx
Firefox: https://developer.mozilla.org/en/DOM:CSS
Opera: http://www.opera.com/docs/specs/opera8/js/dom/css/

ie8 的 hasLayout

2011-05-20T18:09:00.001+08:00

今天跟一个同事说 ie8 已经没有 hasLayout 了，但却被认为有异议，所以动手实验了一下，在ie8中，检测 block 元素的 hasLayout 为true， inline 元素的 hasLayout 为 false。
但是却不能用之前的触发 ie6/7 hasLayout 的方法去触发了，比如 zoom:1 ， height:1% 等就不能让 ie8 的 hasLayout 为 true。

可以使用 element.currentStyle.hasLayout 来检测其值为 true 或者 false

个人推测：
ie8 实际上的确是采用了标准的盒模型放弃了 hasLayout，但是却可以使用 hasLayout 来检测其是否是 BFC (Block Formatting Context)

参考链接：
http://haslayout.net/haslayout
http://www.w3help.org/zh-cn/causes/RM8002

window.history

2011-05-18T18:18:00.000+08:00

通常，我们使用 #hash 跳转页面的某个位置，但有时跳转并不是你想要的，如果阻止了默认的跳转行为，那么 #hash 就不会计入 history ，点击浏览器的后退按钮就什么都不会发生了（想象 gmail 中的所有操作都是靠 #hash 来切换不同的界面的，而且点后退按钮可以返回之前操作的界面）

通过 HTML5 的 history API，我们可以很容易地实现我们想要的：

history.pushState(data, title [,url])
history.replaceState(data, title, [,url])

if( history.pushState){
history.pushState(null, null, '#myhash');
}else{
location.hash = '#myhash';
}

浏览器支持：

firefox 4+
safari 5+
chrome 8+

history.pushState() 来改 hash 是个杀鸡用牛刀的耍酷，更帅的应用场景可以看这个视频：

当点击链接切换页面的时候，阻止默认的跳转到新页面的行为，而通过ajax来加载页面上不同区域的内容，并且此时地址栏的 URL 也做相应的改变！更酷的是后退按钮也可以很好地工作！这大大缩短了加载整个页面所需的时间。

实现代码：

$('#slider a').click(function() {
history.pushState({ path: this.path }, '', this.href)
$.get(this.href, function(data) {
$('#slider').slideTo(data)
})
return false
})

当点击后退按钮时，会触发 onpopstate ：

$(window).bind('popstate', function() {
$('#slider').slideTo(location.pathname)
})

参考资料：
http://leaverou.me/2011/05/change-url-hash-without-page-jump/
http://css-tricks.com/hash-tag-links-padding/
http://www.w3.org/TR/html5/history.html#the-history-interface
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

font-size 的 px em 与 rem

2011-05-03T16:25:00.002+08:00

之前看到说 px 与 em 的区别是 px 在 ie 里不能放大，但是我用 ctrl 滚动鼠标放大页面，文字是可以放大的嘛，就一直以为这个是以讹传讹的错误理论；

今天看了Jonathan Snook 的文章，才注意到，这个放大文字，是指浏览器自带的文字大小的调整功能，并不是放大整个页面，在ie中，调整文字的功能是这个：

OK，那么一切就明了了。如果使用 px 作为字体大小的单位，那么在 ie 下边，当通过上述方法在浏览器中设置大字号的文字并不能生效，即使在 ie9 中也不能。

任何默认浏览器的字体大小都是 16px ，当设置 body 的 font-size:62.5% 的时候， 1em = 10px; 1.2em = 12px;

em 单位的特点：

em 值不是固定的
em 会根据父级元素的大小来进行计算；

使用 em 时候有个很严重的问题，看代码：

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

如果一个 li 中又出现了一个列表 ul li ，那么这个 li 将会是 20px，如果其中再嵌套了一个 ul li，这将会是一种噩梦...

所以，在 css3 中，提出了一个新的单位来解决这个问题： rem ( root em )
根据根元素来计算em的值；根元素也就是 <html>
所以代码可以是：

html { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4rem; } /* =14px */

问题解决了，世界清静了 :P

注： opera 尚不支持 rem； ie9、chrome、firefox、safari 都已经支持 rem；

参考链接：
http://snook.ca/archives/html_and_css/font-size-with-rem

有关标签的一些现实
2011-05-03T15:28:00.000+08:00
今天发现了一个蛋疼的现实：
<marquee> 是被各个浏览器都支持的，我记得当初之所以不建议大家在代码中使用 marquee 的原因就是这个东西只有 ie 支持，是非标准的标签... 那么现在呢？当 HTML5 越来越以现实需求为中心，当 a 标签都可以包裹 h1, p, div 的时候， marquee 真的有那么邪恶吗？

在非ie浏览器中并不一定需要 <marquee> 标签来实现跑马灯效果。

chrome 跑马灯效果生效的真正属性是： overflow : -webkit-marquee;

而 firefox 中则是使用 -moz-binding 来实现的 https://developer.mozilla.org/en/CSS/-moz-binding

opera 是通过 display : -wap-marquee 来实现；

如果在 CSS 中定了上述几个属性，那么将会导致在某个浏览器中跑马灯效果失效。

最后，这个标签还被 iOS 中的 safari 支持！

注： -wap- 前缀是 mobile css 中引入的 http://dev.opera.com/articles/view/mobile-style-css-mobile-profile-2-0/

chrome://net-internals/#hsts

2011-04-19T16:19:00.000+08:00
chrome://net-internals/#hsts
可以设置强制使用 https 链接的网址

(chrome|checkout|health|docs|spreadsheets|sites|appengine|encrypted).google.com

参考链接：
http://dev.chromium.org/sts
http://src.chromium.org/viewvc/chrome/trunk/src/net/base/transport_security_state.cc?view=log

浏览器渲染模式

2011-04-14T16:44:00.000+08:00
共有三种渲染模式：怪异模式（Quirks mode）、准标准模式（almost standards mode）、标准模式（full standards mode）
各个浏览器相同版本的标准模式和准标准模式之间差异极少。

via: http://www.w3help.org/zh-cn/causes/readme.html

<!doctype html>
当页面上有文档声明（DOCTYPE declaration）时，页面就会进入标准模式渲染页面。

HTML4.01 规范中提到，DTD签名或后面容许出现空白符，这里提到的“空白符”包括空格符、换行符、制表符和注释。
实际情境中，在DTD前边前加入注释或其他内容，在某些浏览器中 DTD 将无法识别，从而进入怪异模式。

via: http://www.w3help.org/zh-cn/causes/HG8001

所以，请确保 DTD 之前没有其他字符，即便有，也只能是空格符、换行符和制表符。

在 ie 下，只使用 <!doctype 就能触发浏览器的标准模式，很神奇。推测 ie 可能是判读如果以 <!doctype 开头的话，开发者就是想进入标准模式，于是 ie 就无视了后边的信息，直接进入标准模式渲染了

在怪异模式下，ie 盒模型的 CSS中定义的宽度 width 是包括了 padding border 值。使用 clientWidth 得出的值 = width - paddingLeft - paddingRight - borderLeft - borderRight

而非ie浏览器，clientWidth/clientHeight 的计算方式在怪异模式跟标准模式相同。

IMG 元素在 IE6(Q) IE7(Q) IE8(Q) 下无法设置 'padding'，其值永远为 0。也就是说，IMG 元素的盒模型在这些浏览器中，其 padding box 与其 content box 是重合的。

和 TABLE 元素一样，目前所有的主流浏览器也都认为 HR/BUTTON/INPUT[type=button/submit/reset] 元素的内容区域是由 border box 决定的，因此在这些元素上设置的 'width' 和 'height' 将作用在这些元素的 border box 上。

IFRAME 元素在 IE6(S) 下有一个 Bug，该元素实际使用的 'padding-right' 和 'padding-bottom' 的值将分别多出其 'border-right-width' 和 'border-bottom-width' 的值的 2 倍。

INPUT[type=text]/TEXTAREA 元素设置 'width'、'height' 时，它们在所有浏览器的怪异模式 (Q) 中都被作用到了 border box，而在所有浏览器的标准模式 (S) 中则作用到了 content box。

一些常见的 doctype 及会触发的模式

参考链接
http://www.w3help.org/zh-cn/causes/readme.html
http://www.w3help.org/zh-cn/kb/001
http://msdn.microsoft.com/en-us/library/bb250395.aspx

javascript: 判断 IE 的渲染模式及判断浏览器标准渲染模式的方法

2011-04-14T14:34:00.001+08:00
判断 ie 是使用ie9、ie8、ie7 哪种模式渲染的方法： document.documentMode
如果没有文档声明，则返回数字 5

只有ie8、ie9可以使用此方法；
ie6 、非IE浏览器使用 document.documentMode 都将返回 undefined；

判断文档是否使用标准模式进行渲染的方法：document.compatMode
标准模式将返回：CSS1Compat
怪异模式将返回：BackCompat

准标准模式也会返回 CSS1Compat，所以这个方法只能判断浏览器是否工作在“怪异模式”下，但是由于准标准模式和标准模式之间差异不大，所以这个方法依然被广泛用来判断浏览器是否工作在标准模式下。

小史：document.compatMode 最早出现在 ie6 中，后来被所有的主流浏览器采用。

参考链接：
http://www.quchao.com/entry/detect-browser-by-features/
http://msdn.microsoft.com/en-us/library/cc196988(v=vs.85).aspx
http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-compatmode
http://www.w3help.org/zh-cn/kb/001

CSS 选择器 :any()

2011-04-12T11:08:00.001+08:00
Firefox4 和最新的 Chrome 隔夜更新版中增加了一个新的 CSS 选择器 :any()
这个选择器目前还没有写入 CSS3 规范，不过随着 Chrome 的加入，相信其他浏览器很快也会开始支持这个选择器
当前，需要使用浏览器厂家前缀： -moz-any() , -webkit-any()

看一下之前我们在CSS中会写到的一段代码：

a{ color:#ccc }
nav a, header a, footer a,li a{ color:#666 }
section li a, article li a, aside li a,article header a{ color:#999 }
...
当越来越多的时候这个选择器就不得不写的很长很长， >_<

:any() 的写法：
/* level 1 /
a{ color:#ccc }

/ level 2 /

:any(section, article, aside)
:any(header, li, nav, header) a{ color:#666 }

/ level 3 */
:any(section, article, aside)
:any(header, li, nav, header)
:any(h1, h2, h3) a{ color:#999 }

参考链接：
https://developer.mozilla.org/en/CSS/%3A-moz-any
http://www.marcofolio.net/css/why_you_want_to_use_the_any_css_selector.html

CSS3: transition transform 学习笔记

2011-04-07T11:35:00.001+08:00
.box{

-webkit-transition:background-color 2s ease-out;
-moz-transition:background-color 2s ease-out;
}

之所以将 transition 写在 .box 而不是 .box:hover 是因为当写在 :hover 中时， transition-timing-function 无法控制离开时的动画速度

transition-timing-function: [ liner | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) ]

liner 匀速运动；
ease 先慢后快再慢【默认值】
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 先慢后平再慢
cubic-bezier(n,n,n,n) 贝塞尔曲线 n 取值 0~1
via: http://www.w3schools.com/css3/css3_pr_transition-timing-function.asp

transition 目前在所有浏览器中都需要加前缀才能使用（-webkit,-moz,-o），ie9 目前尚不支持此属性

img:hover{
-moz-transform:rotate(20deg) skew(30deg) translate(10px,10px) scale(2,1);
-moz-transform-origin:left center;
}
rotate(deg) 旋转

skew(x-deg, y-deg) 倾斜（变形）

translate(x, y) 位移

scale(x,y) 拉伸

其中如果(x,y) 只定义一个值的话，那么 x=y

chrome 中 inline 元素不支持 transform

ie9 支持 transform，需要 -ms 前缀

ie9 中 inline 元素也可以使用transform

transform-origin:left center;
用于控制transform的原点位置，可以是诸如 left right 的值也可以是百分比或具体的px、em

区分
transition 是过渡动画；用来控制一些CSS属性值改变的快慢等
transform 是变换；一般是形状的变化 or 位置的变化，可以类比Photoshop 中的 Ctrl+T，有拉伸、扭曲、变形、偏移

transform 与 animation 的区别是， animation 可以在 keyframes 中详细地定义动画过程中的变换的参数，比如转动一半时间时 scale(2)，转动完成时 scale(1) 等

demo:
http://rpsh.net/demo/note/css3_transform.html

参考链接：
http://www.w3.org/TR/css3-transitions/
http://www.w3.org/TR/css3-2d-transforms/
http://www.w3.org/TR/css3-3d-transforms/
http://www.w3.org/TR/css3-animations/

一蓑烟雨任平生

2006-10-08T00:27:00.000+08:00

定风波
----苏轼
莫听穿林打叶声，何妨吟啸且徐行。
竹杖芒鞋轻胜马，谁怕，一蓑烟雨任平生。
料峭春风吹酒醒，微冷，山头斜照却相迎。
回首向来萧瑟处，归去，也无风雨也无晴。

任平生的学习笔记

IE 中按后退按钮页面乱码的解决方案

ol 有序列表序号的倒序

IE10 的 HTML5 怪异模式

人民币符号 ¥ 一横还是两横的问题

HTML5: element.classList API

HTML5: element.dataset API

javascript keycodes 键盘键值

自定义有序列表 li 项目符号的数字样式

HTML5 Shiv 的一些趣事

判断浏览器是否支持某个css属性

ie8 的 hasLayout

window.history

font-size 的 px em 与 rem

chrome://net-internals/#hsts

浏览器渲染模式

javascript: 判断 IE 的渲染模式 及 判断浏览器标准渲染模式的方法

CSS 选择器 :any()

CSS3: transition transform 学习笔记

一蓑烟雨任平生

javascript: 判断 IE 的渲染模式及判断浏览器标准渲染模式的方法