常见ie9兼容问题
公司项目要求需要兼容ie9，开发过程中遇到了许多问题，在这里记录一下，希望可以帮到其他需要的小伙伴。
浏览器兼容性问题无外乎三点，css样式兼容、JavaScript兼容及h5部分标签的兼容。主要介绍以下几种常见兼容问题：
1、 flex布局兼容问题
相信很多小伙伴在开发的时候，都喜欢用flex进行布局，这种布局方式简单方便快捷，但是在ie9中，这个属性不兼容。这个时候，推荐使用float属性进行布局，或者绝对定位的方式进行布局。
2、 transform属性
部门老版本ie9浏览器不支持该属性，介意使用相对定位的方式进行位置微调。
3、文件上传
绝大部分情况，我们上传文件都是直接使用FormData对象异步上传，但是ie9版本不支持formdata对象得异步上传。那么怎么办呢？可以使用最初的表单提交的方式，文件本身上传不难，只需要注意一些细节：
①用最初的表单提交的方式form.submit()
②<input type=’file’> onchange问题
③点击<input type=’file’>问题
④提交表单后跳转问题
4、placeholder问题
在表单输入的时候，未输入信息的时候，往往会看到一些提示性文字，这就是input标签的placeholder属性所带来的效果。但是在ie9及以下浏览器中，不支持这个属性。如果要实现这种效果，就得另辟蹊径了。目前主要有以下几种方式：
1）使用value来代替
2）添加标签，解决思路主要如下：
①判断浏览器是否支持placeholder属性
'placeholder' in document.createElement('input')
②获取当前页面中的所有具有placeholder属性的元素
document.querySelectorAll('[placeholder]')
③由于document.querySelectorAll返回的是一个 NodeList 对象,需要将其通过Array.prototype.slice.call()将其转换成数组，这样我们就可以通过数组的forEach()方法对页面中获取到的所有元素进行遍历
Array.prototype.slice.call(document.querySelectorAll('[placeholder]'))
④遍历取到的dom数组，根据当前的元素克隆出一个一样的克隆节点(备注：这里的思想是这样的，克隆出一个一样的节点插入到当前节点的后面，当浏览器不支持placeholder属性的时候，需要显示placeholder属性的信息，就将克隆节点显示出来，将当前节点隐藏掉)
var cloneNode = item.cloneNode()
⑤判断节点的类型，如果节点的类型[type=”password”],就将克隆节点的类型改为text
if (cloneNode.getAttribute('type').toLowerCase() === 'password') {
cloneNode.setAttribute('type', 'text')
}
⑥将克隆节点的placeholder属性值，写入value；并将此克隆节点隐藏，将克隆节点插入到当前节点的后面
⑦对克隆节点绑定focus事件，当克隆节点获取焦点时，将克隆节点隐藏，并将当前节点显示出来，并将当前节点获取焦点
item.nextSibling.addEventListener('focus', function () {
this.style.display = 'none'
this.previousSibling.style.display = 'inline'
this.previousSibling.focus()
})
⑧对当前节点绑定focus事件，当前节点获取焦点时，将紧跟在当前节点后面的克隆节点隐藏掉
item.addEventListener('focus', function () {
this.nextSibling.style.display = 'none'
})
⑨对当前节点绑定blur事件，当前节点失去焦点时，如果当前节点没有进行任何输入，则需要对齐进行placeholder提示，这时就将当前节点隐藏，将紧跟在当前节点后面的克隆节点显示出来
item.addEventListener('blur', function () {
if (!this.value) {
this.style.display = 'none'
this.nextSibling.style.display = 'inline'
}
})
⑩在页面初始化完成后，判断当前节点是否有初始输入值，如果没有的话，将当前节点隐藏，将紧跟在当前节点后的克隆节点显示出来
if (!item.value) {
item.style.display = 'none'
item.nextSibling.style.display = 'inline'
}
整体代码如下：
function compatiblePlaceholder() {
if (!('placeholder' in document.createElement('input'))) {
// 将返回的nodeList对象转为数组
var nodes = Array.prototype.slice.call(document.querySelectorAll('[placeholder]'))
nodes.forEach(function (item, index) {
if (item.nextElementSibling) {
} else {
item.addEventListener('focus', function () {
this.nextSibling.style.display = 'none'
})
item.addEventListener('blur', function () {
if (!this.value) {
this.style.display = 'none'
this.nextSibling.style.display = 'inline'
}
})
var cloneNode = item.cloneNode()
// 如果[type='password']类型，则转为text
if (cloneNode.getAttribute('type').toLowerCase() === 'password') {
cloneNode.setAttribute('type', 'text')
}
cloneNode.setAttribute('value', cloneNode.getAttribute('placeholder'))
cloneNode.style.display = 'none'
item.insertAdjacentHTML('afterend', cloneNode.outerHTML)
item.nextSibling.addEventListener('focus', function () {
this.style.display = 'none'
this.previousSibling.style.display = 'inline'
this.previousSibling.focus()
})
if (!item.value) {
item.style.display = 'none'
item.nextSibling.style.display = 'inline'
}
}
})
}
}
3）直接引用现成的第三方插件，如jquery.placeholder.min.js等等