IE兼容 placeholder 属性

placeholder属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。该提示会在用户输入值之前显示在输入字段中。例如：

但是这是一个HTML5属性对IE的兼容特别不友好

于是，我们就可以自定义一个模拟placeholder效果的方法，如下代码：

border-radius是css3的属性，因此比较早的浏览器是不会支持该属性的，如何才能实现border-radius兼容老版本的浏览器呢？我们可以使用网上提供的一个插件来解决这个问题。

第一步：下载ie-css3.htc文件

http://files.cnblogs.com/aiyuchen/ie-css3.htc.zip

第二步：使用behavior通知浏览器调用脚本，代码如下：

Canvas实现图片圆角效果

本规则适用于各种Canvas绘制的规则或不规则图形。Canvas中有个名为createPattern的方法，可以让已知尺寸的图片元素转换成纹理对象，作填充用。

关于IE8以及以下版本不支持媒体查询的解决方案

1、加入代码

以解决IE8及以下不支持媒体查询。它通过js来hack IE浏览器。

实现思路

1.把head中所有

的css路径取出来放入数组

2.然后遍历数组一个个发ajax请求

3.ajax回调后仅分析response中的media query的min-width和max-width语法，分析出viewport变化区间对应相应的css块

4.页面初始化时和window.resize时，根据当前viewport使用相应的css块。

优点：压缩后仅1k,不跨域时性能ok，只需引入respond.js通用易用

缺点：仅支持media query的min-width和max-width（用于响应式够用）；支持跨域，虽然配置有点麻烦，实现跨域代价高而且有闪屏体验欠佳。

滚轮事件

attachEvent和addEventListener在前端开发过程中经常性的使用，他们都可以用来绑定脚本事件，取代在html中写obj.onclick=method。

相同点：

它们都是dom对象的方法，可以实现一种事件绑定多个事件处理函数。

不同点：

1.attachEvent是IE有的方法，它不遵循W3C标准，而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener，所以实际开发中需分开处理。

2.多次绑定后执行的顺序是不一样的，attachEvent是后绑定先执行，addEventListener是先绑定先执行。

3.绑定时间时，attachEvent必须带on，如onclick，onmouseover等，而addEventListener不能带on，如click，mouseover。这个区别在以上代码中可见。

4.attachEvent仅需要传递两个参数，而addEventListener需要传递三个参数，这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目 标阶段（目标本身）→冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。

获取样式

currentStyle属性和getComputedStyle属性不能设置属性,只能获取

currentStyle:该属性只兼容IE,不兼容火狐和谷歌

getComputedStyle:该属性是兼容火狐谷歌,不兼容IE

不同浏览器对DOM的支持程度

问题：在IE6-8中，对childNodes支持还是挺好的，相反其他浏览器会把文本节点和元素节点混淆，可用nodeType来鉴别。

JS:

此时的弹出框就会显示‘11’，比我们想要的‘5’，多出‘6’。

另外上面使用childNodes会出现问题，可用children来代替，只会出现我们想要的元素节点，不会出现兼容问题，所以上面因childNodes可以改为children：

此时弹出框显示的数字为‘5’，就是我们想要的结果。

children会只显示子节点。

总结：一些和兼容相关的工具/库：

lhtml5shiv

lRespond.js

lCSS Reset

lnormalize.css

lModernizr.js

lpostcss

特别是Modernizr.js和postcss很有实践价值，值得好好看看用法。

用到的网站：

lcaniuse.com查CSS属性兼容

lBrowserhacks查Hack的写法

要做好IE的兼容要有耐心，细心推敲琢磨，希望文章能给你带来启发！