看了网上的的帖子真是水的一塌糊涂，完全没有解决我和广大网友们的关于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]-->
路漫漫其修远兮吾将上下而求索。