修复IE错误:总是一个好主意?

Max*_*Art 5 javascript internet-explorer dom

Internet Explorer 在过去3年中有了很大的改进,因为IE 10已经成为一款性能相当不错的浏览器.但是,即使有了这些改进,Web开发人员仍然必须:

  1. 处理旧版本,特别是IE8甚至IE7;
  2. 因为永远存在IE浏览器的错误,比如未实现的document.evaluate,或者oninput在删除或contentEditable元素上没有触发的事件.

我问自己这些解决方法的"可接受"限制是什么.例如,IE <9 change事件不会冒泡:但由于它支持focusinfocusout泡泡,它可以通过几个事件监听器来修复.

众所周知,IE <9不能正确处理元素innerHTML上的属性<select>,因此我们可以重新定义属性(仅限IE8):

(function() {
    var re = /^<SELECT(?: [\w:]+=(?:\S+|'[^']*'|"[^"]*"))*>/,
        div = document.createElement("div");
    Object.defineProperty(HTMLSelectElement.prototype, "innerHTML", {get: function() {
        var out = this.outerHTML, m = out.match(re);
        return m ? out.slice(m[0].length, -9) : "";
    }, set: function(v) {
        this.innerText = "";
        if (v = String(v)) {
            div.innerHTML = "<select>" + v + "</select>";
            var s = div.firstChild;
            while (s.firstChild) this.appendChild(s.firstChild);
        }
    }});
})();
Run Code Online (Sandbox Code Playgroud)

但IE - 甚至IE11!- 仍然不允许动态设置元素的value属性<select>,所以(IE8-11):

Object.defineProperty(HTMLSelectElement.prototype, "value", {get: function() {
    var opt = this.selectedIndex >= 0 ? this.options[this.selectedIndex] : null;
    return opt ? opt.value : "";
}, set: function(val) {
    val = String(val);
    var ops = this.options, i = ops.length;
    while (i--) if (ops[i].value === val) break;
    this.selectedIndex = i;
}});
Run Code Online (Sandbox Code Playgroud)

这些工作做得很好,可能有点慢,但只是在一个resticted情况下:HTMLSelectElements.而且它们很少能代表性能问题.

但是因为我正在改变一些基本的DOM属性,所以我想知道是否会出现任何我没有看到的问题.有没有人有想法?