2 IE8网页视图 - 看起来完全不同？为什么？ [英] 2 IE8 Webpage views - Look completely different? Why?

问题描述

以下是我使用自适应设计编码的原始页面，并且不支持移动设备：

下面的IE 8中的图片显示：

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

这可能与这段代码有关：

< meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1>

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

编辑：请不要编辑我的代码更改IE 8到IE 9.我知道这个问题正在IE 9中测试，但它在Developer Tools中使用 IE 8 Document Mode ，所以它和IE一样8！

解决方案

好的，这就是我解决这个问题的方法。显然，IE 9之前的任何版本的IE在链接标签<$内部使用媒体查询时都不附加样式表 media 属性。此外，IE 8-在出现此行时有一些奇怪的行为：< meta name =viewportcontent =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> 由于谷歌Chrome浏览器框架不可用而导致问题，而边缘也不是。所以，我刚刚删除了这一行，现在一切都很好。

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

 <！ -  [if gte IE 9]> 
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no/> 
<！[endif]  - > 
<！ -  [if！IE]><！ - > 
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no/> 
<！ - <！[endif]  - > 
< link rel =stylesheettype =text / csshref =css / narrow.cssmedia =only screen and（max-device-width：600px）/> 
<！ -  [if lt IE 9]> 
< link rel =stylesheettype =text / csshref =css / index.css/> 
<！[endif]  - > 
<！ -  [if gte IE 9]> 
< link rel =stylesheettype =text / csshref =css / index.cssmedia =only screen and（min-device-width：601px）/> 
<！[endif]  - > 
<！ -  [if！IE]><！ - > 
< link rel =stylesheettype =text / csshref =css / index.cssmedia =only screen and（min-device-width：601px）/> 
<！ - <！[endif]  - > 
  

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

Here's the original page that I coded using "Adaptive Design", and has no support for mobile devices: http://opportunityfinance.net/Test/savedateIE8/index.html

Looks great in IE 8 as it should via the pic below:

Here's a page that I optimized for mobile devices, basically it is EXACTLY the same as the first page, except it adds in <meta> tags and such for mobile devices. Looks good in all browsers that I test, except IE 7 (which I could care less about), and IE 8 (WHICH I REALLY CARE ABOUT) A lot of people visit the site using IE 8, so it needs to support IE 8!: http://opportunityfinance.net/conference-2013/index.html

Pic of what it looks like in IE 8 below:

Why is this looking completely different in IE 8 than the first pic? I can't understand it. AFAIK, it should be loading up the index.css file and applying it exactly like the first page. What is the problem here?

Could it possibly be related to this bit of code:

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

But if I remove that code than it looks all jacked up in IE 9 also!

EDIT: Please do not edit my code changing IE 8 to IE 9. I understand that this problem is being tested in IE 9, but it is using IE 8 Document Mode in Developer Tools, so it is the same as IE 8!

解决方案

Ok, here's how I solved this problem. Apparently any version of IE before IE 9 does not attach the stylesheet when using media queries inside of the link tags media attribute. Also, IE 8- had some odd behavior when presented with this line: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> And as it turns out, I don't even need this line: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> which was causing problems since the Google Chrome Frame wasn't available, and edge wasn't either. So, I just removed that line, and all is fine now.

Here's the dirty hack I had to do in order to get this working for mobile devices and IE 7 and 8, for anyone interested:

<!--[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]-->

I wish there was an else statement in these conditionals, but whatever. This works now and loads up the index.css file and thank god, cause I was pulling out my hair on this one! The narrow.css file doesn't need any conditionals, since IE 7 and 8 ignore the stylesheet anyways cause it uses media queries.

这篇关于2 IE8网页视图 - 看起来完全不同？为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！