目录
- readonly
- html标签属性
- meta 标签
- 解决css hack
- IE8 下的css3
1.readonly
(1)readonly 属性规定输入字段为只读
(2)只读字段是不能修改的。但用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
(3)可以防止用户对值进行修改
2.html 属性
- dir:规定元素内容的文本方向。
- lang:规定元素内容的语言。
- xmlns: 微博关注按钮 需要增加 XML命名空间
- class: no-js 是配合Modernizr 一起使用的类名
Modernizr 是一个 javascript 库，检查你的游览器是否支持 CSS3 或者 HTML5 的特性而自动添加一些类名（class）到 <html> 并 替换掉原来的 .no-js
简单来说，Modernizr 就是一个CSS3/HTML5 的测试器，你需要测试什么，这可以到它的官方网站配置，选择自己需要测试的元素。
还有让你的游览器支持 HTML5 中的新的标签 官方网站
关于Moderniz 的具体使用方法和解释，请参照大神的文章：
3.meta
X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。
在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。 兼容性模式设置优先级：
meta tag > http header
IE=EDGE
对IE使用最高模式渲染
即会强制浏览器按照最新的标准去渲染。就像在Google’s CDN使用最新版本的JQuery一样，这是按照最新版本，但也可能由于没有固定的版本而破坏你的布局。
Windows-8 / MSIE-11引入了Tiles，因为这样的服务器管理员可能已经开始在其服务器日志中看到HTTP 404错误，因为它试图在网站域的根目录中查找“browserconfig.xml”文件。
4.解决css hack
- 条件注释法
注：IE10+已经不再支持条件注释)
- 属性前缀法
// IE6~7为红色，其他为蓝色div{ width:500px; height:500px; color:blue; *color:red;} IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
- 选择器前缀法
- IE6能识别*html.class{}
- IE7能识别*+html.class{} 或者 *:first-child+html .class{}。
- 使用兼容工具
html5shiv.js
在IE6~8（不支持html5标签）上模拟html5标签
respond.js
在IE6~8（不支持css3）上模拟CSS3 Media Queries
CSS Reset和Normalize.css
在默认的HTML元素样式上提供了跨浏览器的高度一致性。
Modernizr.js
他会为浏览器的html标签生成一批的css的class名称，标记当前浏览器支持和不支持的特性。我们利用html标签上的类名，就可以为不同版本的不同浏览器添加兼容样式
参考：
4.IE8 下的css3
(1) transform
我们都知道，transform是css3推出的变形属性，包括斜切、平移、缩放、旋转等，配合css3的动画，可以做出很多炫酷的效果。
但会有公司项目要求让transform兼容到IE8浏览器。明显的，IE8是不支持css3的，但是IE浏览器都一个filter滤镜，可以实现类似的效果。
使用矩阵变形 Matrix
transform: rotate(40deg); -o-transform: rotate(40deg); -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)}
参考：
(2) background
同样利用filter滤镜
background: rgba(0, 0, 0, .5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000);
background: url('img/aa.png') no-repeat;background: none\9;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.img/aa.png',sizingMethod='scale');background-size: 34px 34px;-moz-background-size: 34px 34px;-webkit-background-size: 34px 34px;