【原创】最有效解决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]-->
路漫漫其修远兮吾将上下而求索。
【原创】最有效解决IE8 position兼容性问题的更多相关文章
- IE8的兼容性问题
IE的兼容性问题是前端开发人员的老大难问题,不过随着时代的发展,IE6逐渐的被淘汰,现在以及很少有网站兼容IE6了,一般都兼容到IE8,现在我总结了一些IE8的兼容性问题及解决方法. 1.使用meta ...
- 解决ie8和ie7显示不一致
解决ie8和ie7显示不一致 当使用 Microsoft Internet Explorer 8 Beta 1 版本时,可能会遇到以下问题之一: • 网页布局不整齐 • 文本或图像重叠 • JavaS ...
- 解决IE8下opacity属性失效问题,无法隐藏元素
解决IE8下opacity属性失效问题 由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...
- 解决ie8(及其以下)不支持getElementsByClassName的问题
这篇技术笔记与大家分享的是:解决IE8(及以下)不支持getElementsByClassName的方法.如果有说错的地方,麻烦留言告诉我,我及时更正,一来是更新一下我的认知,二来也是不要误导的他人, ...
- 完美解决IE8有两个进程的问题
完美解决IE8有两个进程的问题,照以下方法设置后就只有一个进程了,没有什么负影响哦! 方法: 1.win+R,在运行框里输入:gpedit.msc,回车进入组策略设置. 2.依次展开:计算机配置——管 ...
- [原创]浅谈移动互联网App兼容性测试
[原创]浅谈移动互联网App兼容性测试 今天要谈的话题,估计各位测试都有感受,移动互联网App兼容性测试,我们到底测试覆盖如何去挑选机型?具体移动App兼容性测试如何开展?是不是应引进像testin这 ...
- 用反向代理nginx proxy_pass配置解决ie8 ajax请求被拦截问题 ie8用nginx代理实现跨域请求访问 nginx405正向代理request_uri
最近调PC版网站ie8的兼容性,发现所有ajax请求还没到后端服务器就直接ajax error了 ie8发不出ajax请求,断点调试发现ajax全进入了error,提示“No transport” 我 ...
- 解决IE8不支持console
解决IE8不支持console,代码中包含console时会报错. //解决 IE8 不支持console window.console = window.console || (function ( ...
- 原创博客>>>解决粘包问题的方法
目录 原创博客>>>解决粘包问题的方法 原创博客>>>解决粘包问题的方法 服务端: import socket import struct service=sock ...
随机推荐
- 07.oAuth2介绍
07.oAuth2介绍 微信可以任意的去添加客户端,第三方的客户端,.去生成key和secret.你就自动成为他的第三方可以,去调用微信的api 简书的第三方登陆 点击微博,这里用到OAuth里面最严 ...
- CodeForces - 566D Restructuring Company 并查集的区间合并
Restructuring Company Even the most successful company can go through a crisis period when you have ...
- 洛谷 - P2568 - GCD - 欧拉函数
https://www.luogu.org/problemnew/show/P2568 统计n以内gcd为质数的数的个数. 求 \(\sum\limits_p \sum\limits_{i=1}^{n ...
- hdu5861【线段树】
题意: 有n个点,每个两两之间有一条路,给出每条路开放的花费,每条路只能打开关闭一次,然后m天里给出一个区间代表这条路必须在该天开放,求每天需要的花费. 思路: 这是一题纯粹用线段树搞的题. 我们可以 ...
- TFS 无法找到新加的Windows用户
Windows 用户加入后,无法在TFS中的"浏览"中找到(只有已经加入TFS的Windows用户显示出来) 其实这时候只要直接输入 用户名 然后点击"保存更改" ...
- Git的使用方法与GitHub项目托管方法
Git的安装 Windows上安装Git 访问网址:https://git-for-windows.github.io/ 点击Download下载,下载后双击安装包进行安装,一直"下一步&q ...
- 面向对象-mixin设计模式的应用(多继承应用场景)
什么是设计模式? 设计模式只是一种开发思想.不是什么固定的格式. 前人的好的思想,我们后人拿过来用! mixin设计模式: 1.mixin设计迷失可以在不对类的内容的修改前提下,扩展类的功能(添加父类 ...
- iOS 利用模态视图实现带黑色蒙版的底部弹窗
本demo仅适用于iOS8及以上系统. 本文将使用autolayout+storyboard来实现弹窗 第一步.storyboard创建界面 1.打开storyboard 拖一个UIViewcontr ...
- noip2017普及组
过了这么久才来写博客,也是我这么一段时间都很低迷吧.... 老实来说,今年应该是要打提高组的...可还是打了普及组... 其实最猥琐的还是我连普及都写挂了,作为一个学了两年的人,图论,进阶dp都写过的 ...
- python连接mysql时连接不到test文件夹怎么办
最新版mysql安装后默认是没有test文件夹的,这时候需要我们自己创建一个test文件夹, 文件默认路径如下 C:\ProgramData\MySQL\MySQL Server 5.7\Dat ...