internet-explorer - 网站无法在 IE8 及更低版本上正确呈现

Question

几天前，我用新设计更新了我的主页，如图所示
http://i.stack.imgur.com/R8i34.png
当我在最新版本的谷歌浏览器、互联网上测试时，新设计似乎工作正常Explorer9 和 Mozilla Firefox。该网站确实使用响应式设计，并且似乎也在使用我的 Xperia Ray。
但是在我的大学里，我们有 Internet Explorer 8 和 Internet Explorer 7。所以我尝试使用 Windows XP、IE7 从我的虚拟机测试该站点，并且该站点似乎呈现如下 http://i.stack.imgur.com /H1xQb.png 出了点问题。请帮我解决这个渲染问题。网站的直接链接是
ankurm.com

Answer 1

您正在使用 HTML5 元素。问题是 IE8 和更早版本不会将 CSS 样式应用于未知元素。您必须按如下方式注册它们：

<!--[if lt IE 9]>  
  <script type="text/javascript">  
    document.createElement("header");  
    document.createElement("footer");  
    document.createElement("section");   
    document.createElement("aside");  
    document.createElement("nav");  
    document.createElement("article");   
    document.createElement("hgroup");   
    document.createElement("time");  
  </script>  
<![endif]--> 

Modernizr ECMAscript 库可以为您完成。

Answer 2

您可以使用microsoft的过滤标签为抛出错误的浏览器导入不同的样式表

http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

if lesser than msie 9
<!--[if lt 8]>
<style type="text/css">
/* markup here */
</style>
<![endif]-->

if greater than msie 8
<!--[if gt 8]>
<style type="text/css">
/* markup here */
</style>
<![endif]-->

这样你就可以拦截和使用不同的风格。您还可以根据浏览器版本导入不同的样式表。

通常只是 Internet Explorer 打嗝，所以条件格式应该足够了。

Answer 3

您正在使用一些 HTML5 元素。IE8 及以下版本只会忽略<header>和<footer>未注册的元素。使用html5shiv让 IE 识别这些元素。

此外，您使用了很多 JS。我不明白这对于这样的页面是多么必要。我不知道你用什么来构建页面，但是当我禁用 JS 时，结果在这里看起来很糟糕，这不太好。如果仅 html5shiv 不能解决问题，那么进一步调试您的问题也将很困难。

最后，如果您要问这样的问题，请提供指向您页面的链接，这样我们就不必从您的屏幕截图中读取它。

编辑：哦，您在最后发布了它，但没有链接它。我的错。