IE 8 网站兼容性问题答案

【问题标题】：IE 8 Website Compatibility IssuesIE 8 网站兼容性问题
【发布时间】：2013-07-09 20:46:04
【问题描述】：

所以，我创建了一个网站。如果我在 Internet Explorer 8 或更低版本中运行它，与 html 关联的所有（大部分）样式似乎都消失了。这是我到目前为止检查过的内容；

我检查了 W3C 验证检查，它运行良好且没有错误，我检查了 IE8 与 HTML5 的兼容性，我没有使用任何不兼容的东西。我已经使用 IE 开发工具更改了 Internet Explorer 的浏览器版本，它显示 css 属性已成功与其相应的元素配对，但它们只是没有显示在页面上。所以我已经没有东西可以尝试检查了。下面是整个网站（只是很小）。

索引；

<!DOCTYPE html>
<html>
  <head>
    <title>Your Indy Buddy</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">  
  </head>
  <body id="body">
<nav id="titlebar">
    <h1><img src="Other/eve.png" style="float:left;margin-right:200px;" alt="Image Not Displayed"/>EVE ONLINE INDY BUDDY</h1>
    <nav id="utilbar">
        <p style="margin-left:0px;">Your Time:</p>
            <form>
                Email <input type="text" name="email"/>
                 Password <input type="text" name="password"/>
                <button type="button" onclick="">Login</button>
            </form>
        <p style="margin-left:0px;">Eve Time : </p>
    </nav>
    <p>Not registered? Register</p>
</nav>
<br/>
<nav id="main">
    <h2>Test</h2>
</nav>
</body>
</html>

style.cs;

/* Reset above occluded */
h1 {font-size:40px;margin-left:10px;margin-bottom:20px;}
p {margin-top:10px;margin-left:10px;}

#body {background-image:url("Other/background.jpg");background-color:#000000;font-family:"Arial Black", Gadget, sans-serif;color:rgb(200,200,200);font-size:14px;}
#main {width:890px;margin:auto;padding:12px;background-color:rgba(145,49,28,0.9);margin-top:180px;}
#titlebar {width:926px;padding-top:10px;padding-bottom:10px;background-color:rgb(24,24,24);position:fixed;left:50%;margin-left:-463px;margin-top:12px;}
#utilbar {width:906px;padding:10px;background-color:rgb(145,49,28)}
#utilbar form {float:right;position:absolute;right:10px;top:85px;}
#utilbar input {font-family:sans-serif;background-color:rgb(180,80,45);border:2px solid rgb(201,113,87);}
#utilbar button {font-family:'Arial Black', Gadget, sans-serif;color:rgb(200,200,200);background-color:rgb(160,60,40);border:2px solid rgb(180,100,70);}
#utilbar button:hover {background-color:rgb(100,30,10);border:2px solid rgb(160,60,30);}

很抱歉将代码转储给你们，但我已经用完了可以尝试的东西，坦率地说我有点困惑。如果是 IE7 及以下只有那不起作用，我会忽略它。但出于某种原因，很多企业仍在使用 IE8。

【问题讨论】：

HTML 5 nav 等标签在 IE 8 中不受支持。添加一个 pollyfill/shiv。

标签： css html web internet-explorer-8

【解决方案1】：

正如 Sheikh Heera 所说，IE8 及以下版本不支持 HTML5 元素。您需要将HTML5 shim 包含在您的代码中。只需将以下内容粘贴到 <head> 元素中：

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

这实质上允许 IE6-8 支持 HTML5 元素，例如 <nav>、<header>、<footer> 等。

Here's HTML5 shim/shiv 的漂亮背景，如果你好奇的话。

【讨论】：

这很有趣，因为我确信我之前的网站是使用导航标签设计的，并且与 IE8 兼容。事实证明，我从来没有使用过。谢谢。

【解决方案2】：

如果不想添加 html5 shim，可以手动添加一些 JS 和 CSS

JS：

<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('main');
</script>
<![endif]-->

CSS：

header, nav, section, article, aside, footer, main{ 
   display: block;
}

【讨论】：

去掉hgroup，它不在spec里面了，加上main，最近又重新插入了。

【解决方案3】：

我建议你看看Modernizr。

引自 Modernizr.com

为什么要使用 Modernizr？

利用很酷的新网络技术非常有趣，除非您必须支持落后的浏览器。 Modernizr 使您可以轻松编写条件 JavaScript 和 CSS 来处理每种情况，无论浏览器是否支持某个功能。它非常适合轻松进行渐进增强。

【讨论】：