【原创】最有效解决IE8 position兼容性问题

看了网上的的帖子真是水的一塌糊涂，完全没有解决我和广大网友们的关于ie8下position兼容性问题。

网上有的技术我就不说了 ，大家自行搜索，我想说的重点是 ie8不支持html5的新标签。这是重点。因此有的童鞋怎么搜索网上再怎么实现也不会成功解决这个问题。

就比如html5的<header></header>标签。

现在解决办法有两种：

　　　　　　　　一、你将那些新标签全改成div（费事费时，还得从新规划css样式 ）

　　　　推荐：　二、用js代码让ie8可以识别那些新标签。

　　　　　　　　　　详解+步骤：

　　　　　　　　　　　　　　1、在head中我们加上判断

<!--[if lte IE 8]>
    <script src="script/html5shiv.min.js"></script>
    <script src="script/selectivizr.min.js"></script>
<![endif]-->

　　　　　　　　　　　　　　判断如果是ie8的情况下我们引入这两个文件

　　　　　　　　　　　　　　2、理所当然地我们在你们放js文件的文件夹下放入这两个文件

　　　　　　　　　　　　html5shiv.min.js文件的内容为：

/* HTML5 Shiv v3.7.2 https://github.com/aFarkas/html5shiv */
; (function(window, document) {
    var version = '3.7.2';
    var options = window.html5 || {};
    var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
    var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
    var supportsHtml5Styles;
    var expando = '_html5shiv';
    var expanID = 0;
    var expandoData = {};
    var supportsUnknownElements; (function() {
        try {
            var a = document.createElement('a');
            a.innerHTML = '<xyz></xyz>';
            supportsHtml5Styles = ('hidden' in a);
            supportsUnknownElements = a.childNodes.length == 1 || (function() { (document.createElement)('a');
                var frag = document.createDocumentFragment();
                return (typeof frag.cloneNode == 'undefined' || typeof frag.createDocumentFragment == 'undefined' || typeof frag.createElement == 'undefined')
            } ())
        } catch(e) {
            supportsHtml5Styles = true;
            supportsUnknownElements = true
        }
    } ());
    function addStyleSheet(ownerDocument, cssText) {
        var p = ownerDocument.createElement('p'),
        parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
        p.innerHTML = 'x<style>' + cssText + '</style>';
        return parent.insertBefore(p.lastChild, parent.firstChild)
    }
    function getElements() {
        var elements = html5.elements;
        return typeof elements == 'string' ? elements.split(' ') : elements
    }
    function addElements(newElements, ownerDocument) {
        var elements = html5.elements;
        if (typeof elements != 'string') {
            elements = elements.join(' ')
        }
        if (typeof newElements != 'string') {
            newElements = newElements.join(' ')
        }
        html5.elements = elements + ' ' + newElements;
        shivDocument(ownerDocument)
    }
    function getExpandoData(ownerDocument) {
        var data = expandoData[ownerDocument[expando]];
        if (!data) {
            data = {};
            expanID++;
            ownerDocument[expando] = expanID;
            expandoData[expanID] = data
        }
        return data
    }
    function createElement(nodeName, ownerDocument, data) {
        if (!ownerDocument) {
            ownerDocument = document
        }
        if (supportsUnknownElements) {
            return ownerDocument.createElement(nodeName)
        }
        if (!data) {
            data = getExpandoData(ownerDocument)
        }
        var node;
        if (data.cache[nodeName]) {
            node = data.cache[nodeName].cloneNode()
        } else if (saveClones.test(nodeName)) {
            node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode()
        } else {
            node = data.createElem(nodeName)
        }
        return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node
    }
    function createDocumentFragment(ownerDocument, data) {
        if (!ownerDocument) {
            ownerDocument = document
        }
        if (supportsUnknownElements) {
            return ownerDocument.createDocumentFragment()
        }
        data = data || getExpandoData(ownerDocument);
        var clone = data.frag.cloneNode(),
        i = 0,
        elems = getElements(),
        l = elems.length;
        for (; i < l; i++) {
            clone.createElement(elems[i])
        }
        return clone
    }
    function shivMethods(ownerDocument, data) {
        if (!data.cache) {
            data.cache = {};
            data.createElem = ownerDocument.createElement;
            data.createFrag = ownerDocument.createDocumentFragment;
            data.frag = data.createFrag()
        }
        ownerDocument.createElement = function(nodeName) {
            if (!html5.shivMethods) {
                return data.createElem(nodeName)
            }
            return createElement(nodeName, ownerDocument, data)
        };
        ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' + 'var n=f.cloneNode(),c=n.createElement;' + 'h.shivMethods&&(' + getElements().join().replace(/[\w\-:]+/g,
        function(nodeName) {
            data.createElem(nodeName);
            data.frag.createElement(nodeName);
            return 'c("' + nodeName + '")'
        }) + ');return n}')(html5, data.frag)
    }
    function shivDocument(ownerDocument) {
        if (!ownerDocument) {
            ownerDocument = document
        }
        var data = getExpandoData(ownerDocument);
        if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
            data.hasCSS = !!addStyleSheet(ownerDocument, 'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' + 'mark{background:#FF0;color:#000}' + 'template{display:none}')
        }
        if (!supportsUnknownElements) {
            shivMethods(ownerDocument, data)
        }
        return ownerDocument
    }
    var html5 = {
        'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video',
        'version': version,
        'shivCSS': (options.shivCSS !== false),
        'supportsUnknownElements': supportsUnknownElements,
        'shivMethods': (options.shivMethods !== false),
        'type': 'default',
        'shivDocument': shivDocument,
        createElement: createElement,
        createDocumentFragment: createDocumentFragment,
        addElements: addElements
    };
    window.html5 = html5;
    shivDocument(document)
} (this, document));

 

 　　　　

　　　　　　selectivizr.min.js文件的内容为：

/*! selectivizr v1.0.2 http://selectivizr.com */
(function(j) {
    function A(a) {
        return a.replace(B, h).replace(C,
        function(a, d, b) {
            for (var a = b.split(","), b = 0, e = a.length; b < e; b++) {
                var s = D(a[b].replace(E, h).replace(F, h)) + o,
                l = [];
                a[b] = s.replace(G,
                function(a, b, c, d, e) {
                    if (b) {
                        if (l.length > 0) {
                            var a = l,
                            f, e = s.substring(0, e).replace(H, i);
                            if (e == i || e.charAt(e.length - 1) == o) e += "*";
                            try {
                                f = t(e)
                            } catch(k) {}
                            if (f) {
                                e = 0;
                                for (c = f.length; e < c; e++) {
                                    for (var d = f[e], h = d.className, j = 0, m = a.length; j < m; j++) {
                                        var g = a[j];
                                        if (!RegExp("(^|\\s)" + g.className + "(\\s|$)").test(d.className) && g.b && (g.b === !0 || g.b(d) === !0)) h = u(h, g.className, !0)
                                    }
                                    d.className = h
                                }
                            }
                            l = []
                        }
                        return b
                    } else {
                        if (b = c ? I(c) : !v || v.test(d) ? {
                            className: w(d),
                            b: !0
                        }: null) return l.push(b),
                        "." + b.className;
                        return a
                    }
                })
            }
            return d + a.join(",")
        })
    }
    function I(a) {
        var c = !0,
        d = w(a.slice(1)),
        b = a.substring(0, 5) == ":not(",
        e,
        f;
        b && (a = a.slice(5, -1));
        var l = a.indexOf("(");
        l > -1 && (a = a.substring(0, l));
        if (a.charAt(0) == ":") switch (a.slice(1)) {
        case "root":
            c = function(a) {
                return b ? a != p: a == p
            };
            break;
        case "target":
            if (m == 8) {
                c = function(a) {
                    function c() {
                        var d = location.hash,
                        e = d.slice(1);
                        return b ? d == i || a.id != e: d != i && a.id == e
                    }
                    k(j, "hashchange",
                    function() {
                        g(a, d, c())
                    });
                    return c()
                };
                break
            }
            return ! 1;
        case "checked":
            c = function(a) {
                J.test(a.type) && k(a, "propertychange",
                function() {
                    event.propertyName == "checked" && g(a, d, a.checked !== b)
                });
                return a.checked !== b
            };
            break;
        case "disabled":
            b = !b;
        case "enabled":
            c = function(c) {
                if (K.test(c.tagName)) return k(c, "propertychange",
                function() {
                    event.propertyName == "$disabled" && g(c, d, c.a === b)
                }),
                q.push(c),
                c.a = c.disabled,
                c.disabled === b;
                return a == ":enabled" ? b: !b
            };
            break;
        case "focus":
            e = "focus",
            f = "blur";
        case "hover":
            e || (e = "mouseenter", f = "mouseleave");
            c = function(a) {
                k(a, b ? f: e,
                function() {
                    g(a, d, !0)
                });
                k(a, b ? e: f,
                function() {
                    g(a, d, !1)
                });
                return b
            };
            break;
        default:
            if (!L.test(a)) return ! 1
        }
        return {
            className: d,
            b: c
        }
    }
    function w(a) {
        return M + "-" + (m == 6 && N ? O++:a.replace(P,
        function(a) {
            return a.charCodeAt(0)
        }))
    }
    function D(a) {
        return a.replace(x, h).replace(Q, o)
    }
    function g(a, c, d) {
        var b = a.className,
        c = u(b, c, d);
        if (c != b) a.className = c,
        a.parentNode.className += i
    }
    function u(a, c, d) {
        var b = RegExp("(^|\\s)" + c + "(\\s|$)"),
        e = b.test(a);
        return d ? e ? a: a + o + c: e ? a.replace(b, h).replace(x, h) : a
    }
    function k(a, c, d) {
        a.attachEvent("on" + c, d)
    }
    function r(a, c) {
        if (/^https?:\/\//i.test(a)) return c.substring(0, c.indexOf("/", 8)) == a.substring(0, a.indexOf("/", 8)) ? a: null;
        if (a.charAt(0) == "/") return c.substring(0, c.indexOf("/", 8)) + a;
        var d = c.split(/[?#]/)[0];
        a.charAt(0) != "?" && d.charAt(d.length - 1) != "/" && (d = d.substring(0, d.lastIndexOf("/") + 1));
        return d + a
    }
    function y(a) {
        if (a) return n.open("GET", a, !1),
        n.send(),
        (n.status == 200 ? n.responseText: i).replace(R, i).replace(S,
        function(c, d, b, e, f) {
            return y(r(b || f, a))
        }).replace(T,
        function(c, d, b) {
            d = d || i;
            return " url(" + d + r(b, a) + d + ") "
        });
        return i
    }
    function U() {
        var a, c;
        a = f.getElementsByTagName("BASE");
        for (var d = a.length > 0 ? a[0].href: f.location.href, b = 0; b < f.styleSheets.length; b++) if (c = f.styleSheets[b], c.href != i && (a = r(c.href, d))) c.cssText = A(y(a));
        q.length > 0 && setInterval(function() {
            for (var a = 0,
            c = q.length; a < c; a++) {
                var b = q[a];
                if (b.disabled !== b.a) b.disabled ? (b.disabled = !1, b.a = !0, b.disabled = !0) : b.a = b.disabled
            }
        },
        250)
    }
    if (!
    /*@cc_on!@*/
    true) {
        var f = document,
        p = f.documentElement,
        n = function() {
            if (j.XMLHttpRequest) return new XMLHttpRequest;
            try {
                return new ActiveXObject("Microsoft.XMLHTTP")
            } catch(a) {
                return null
            }
        } (),
        m = /MSIE (\d+)/.exec(navigator.userAgent)[1];
        if (! (f.compatMode != "CSS1Compat" || m < 6 || m > 8 || !n)) {
            var z = {
                NW: "*.Dom.select",
                MooTools: "$$",
                DOMAssistant: "*.$",
                Prototype: "$$",
                YAHOO: "*.util.Selector.query",
                Sizzle: "*",
                jQuery: "*",
                dojo: "*.query"
            },
            t,
            q = [],
            O = 0,
            N = !0,
            M = "slvzr",
            R = /(\/\*[^*]*\*+([^\/][^*]*\*+)*\/)\s*/g,
            S = /@import\s*(?:(?:(?:url\(\s*(['"]?)(.*)\1)\s*\))|(?:(['"])(.*)\3))[^;]*;/g,
            T = /\burl\(\s*(["']?)(?!data:)([^"')]+)\1\s*\)/g,
            L = /^:(empty|(first|last|only|nth(-last)?)-(child|of-type))$/,
            B = /:(:first-(?:line|letter))/g,
            C = /(^|})\s*([^\{]*?[\[:][^{]+)/g,
            G = /([ +~>])|(:[a-z-]+(?:\(.*?\)+)?)|(\[.*?\])/g,
            H = /(:not\()?:(hover|enabled|disabled|focus|checked|target|active|visited|first-line|first-letter)\)?/g,
            P = /[^\w-]/g,
            K = /^(INPUT|SELECT|TEXTAREA|BUTTON)$/,
            J = /^(checkbox|radio)$/,
            v = m > 6 ? /[\$\^*]=(['"])\1/: null,
            E = /([(\[+~])\s+/g,
            F = /\s+([)\]+~])/g,
            Q = /\s+/g,
            x = /^\s*((?:[\S\s]*\S)?)\s*$/,
            i = "",
            o = " ",
            h = "$1"; (function(a, c) {
                function d() {
                    try {
                        p.doScroll("left")
                    } catch(a) {
                        setTimeout(d, 50);
                        return
                    }
                    b("poll")
                }
                function b(d) {
                    if (! (d.type == "readystatechange" && f.readyState != "complete") && ((d.type == "load" ? a: f).detachEvent("on" + d.type, b, !1), !e && (e = !0))) c.call(a, d.type || d)
                }
                var e = !1,
                g = !0;
                if (f.readyState == "complete") c.call(a, i);
                else {
                    if (f.createEventObject && p.doScroll) {
                        try {
                            g = !a.frameElement
                        } catch(h) {}
                        g && d()
                    }
                    k(f, "readystatechange", b);
                    k(a, "load", b)
                }
            })(j,
            function() {
                for (var a in z) {
                    var c, d, b = j;
                    if (j[a]) {
                        for (c = z[a].replace("*", a).split("."); (d = c.shift()) && (b = b[d]););
                        if (typeof b == "function") {
                            t = b;
                            U();
                            break
                        }
                    }
                }
            })
        }
    }
})(this);

 

　　大家只要创建这两个文件，将其正确引用就可以了。

　　ps：前端的兄弟们，我有一句话不知当讲不当讲，人这一辈子，烟可以抽，酒可以喝，架可以打，有事说事，我能帮就帮！！但是你要是碰这个？？？对不起，我们不认识。

　　　　前面是瞎扯淡，主要是让大家更有更好的交互体验，提醒一下用户们更显一下浏览器吧（在body的开头中加入如下提示性代码）：

　　　　　　

<!--[if lte IE 8]><div class="browsehappy" role="dialog">当前网页 <strong>不支持</strong> 你正在使用的浏览器。为了正常的访问，请 <a href="http://browsehappy.com/" target="_blank">升级你的浏览器</a>！</div><![endif]-->

 

路漫漫其修远兮吾将上下而求索。