IE 8网站兼容性问题

所以，我创建了一个网站的开始。如果我在Internet Explorer 8或更低版本中运行它，与html关联的所有（大部分）样式似乎都会消失。这是我迄今检查的内容;IE 8网站兼容性问题

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

index;

<!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上运行。

来源

2013-07-08 Rudi Kershaw

'IE 8'不支持'nav'等'HTML 5'标签。添加pollyfill/shiv。 –

就像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垫片/下脚一个漂亮的背景，如果你好奇。

<!--[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; 
}

来源

2013-07-08 20:05:26

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

如果你不希望添加HTML5的垫片，你可以通过添加一些JS和CSS

JS手动执行此操作你看看Modernizr。

从Modernizr.com

为什么使用Modernizr的报价？

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

来源

2013-07-08 20:09:55 stackErr

删除hgroup，它不再在规范中，并添加最近重新插入的main。 – Rob

我建议

来源

2013-07-08 20:20:39

IE 8网站兼容性问题

回答

相关问题