Question

几天前，我使用新设计更新了我的主页，如图所示
http://i.stack.imgur.com/R8i34.png
当我在最新版本的Google Chrome，Internet 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]-->

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

通常只是网络浏览器打嗝，所以条件格式应该足够了。

Answer 3

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

此外，你使用了很多JS。我不知道这样的页面是如何必要的。我不知道你用什么来构建页面，但是当我禁用JS时结果看起来很糟糕，这不是很好。如果单独html5shiv没有解决问题，那么进一步调试你的问题也很困难。

最后，如果你问这样的话，请提供一个指向你网页的链接，这样我们就不必从截图中读取它了。

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

在IE8及以下版本的网站无法正常呈现

3 个答案: