1

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

在 IE 8 中看起来很棒，如下图所示：

IE 8 看起来不错

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

它在下面的 IE 8 中的样子：

支持移动设备的 IE 8 Nightmare

为什么这在 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 相同！

4

1 回答 1

1

好的，这就是我解决这个问题的方法。media queries显然，在 IE 9 之前的任何版本的 IE在使用linktagsmedia属性时都不会附加样式表。此外，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 不可用，edge 也不可用. 所以，我刚刚删除了那条线，现在一切都很好。

这是我必须做的肮脏的黑客攻击，以便让任何有兴趣的人都能在移动设备和 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 无论如何都会忽略样式表，因为它使用媒体查询。

于 2013-04-02T06:25:37.320 回答