帮助教程

  • 解决IE8 position 兼容性问题 靠右左不起作用居中

    最近更新时间:2018-12-05 16:59:57 62

    在IE模式 靠右是居中的,解决办法如下

    image.png

    1、头部引入代码

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

    2、js文件代码 点我下载 

    script.zip

    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);



    以上内容是否对您有帮助?
  • Close