2 IE8网页视图 - 看起来完全不同？为什么？

Question

以下是我使用“自适应设计”编码的原始页面，并且不支持移动设备：http://opportunityfinance.net/Test/savedateIE8/index.html

在IE 8中看起来很棒，因为它应该通过下面的图片：

这是我针对移动设备优化的页面，基本上它与第一页完全相同，只是它添加了<meta>标签等移动设备。在我测试的所有浏览器中看起来都不错，除了IE 7（我不太关心）和IE 8（我真的很关心）很多人使用IE 8访问该网站，所以它需要支持IE 8！ ：http://opportunityfinance.net/conference-2013/index.html

下面的IE 8中的图片：

为什么在IE 8中看起来与第一张图完全不同？我无法理解。 AFAIK，它应该加载index.css文件并完全像第一页一样应用它。这有什么问题？

这可能与这段代码有关：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

但是，如果我删除了那个代码而不是IE 9中的所有代码！

编辑：请不要编辑我的代码，将IE 8更改为IE 9.我知道这个问题正在IE 9中测试，但它在开发人员工具中使用IE 8 Document Mode，所以它和IE 8一样！

Answer 1

好的，这就是我解决这个问题的方法。显然，在media queries标签link属性中使用media时，IE 9之前的任何IE版本都不会附加样式表。此外，IE 8-在出现这一行时有一些奇怪的行为：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />事实证明，我甚至不需要这一行：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">因为Google Chrome Frame而没有引起问题没有，边缘也不是。所以，我刚删除那条线，现在一切都很好。

对于任何感兴趣的人来说，为了让这个适用于移动设备和IE 7和8，我必须做的肮脏的黑客攻击：

<!--[if gte IE 9]>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<![endif]-->
<!--[if !IE]><!-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--<![endif]-->
<link rel="stylesheet" type="text/css" href="css/narrow.css" media="only screen and (max-device-width: 600px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<![endif]-->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="css/index.css" media="only screen and (min-device-width: 601px)" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/index.css" media="only screen and (min-device-width: 601px)" />
<!--<![endif]-->

我希望在这些条件中有else陈述，但无论如何。这现在可以工作并加载index.css文件并感谢上帝，因为我正在拔出我的头发！ narrow.css文件不需要任何条件，因为IE 7和8无论如何都会忽略样式表，因为它使用媒体查询。