获取 IE8 条件样式表以使响应式网页设计正常工作答案

【问题标题】：Get IE8 conditional style sheet for responsive web design to work获取 IE8 条件样式表以使响应式网页设计正常工作
【发布时间】：2016-05-03 02:30:37
【问题描述】：

我创建了一个移动优先的响应式网页。它在我喜欢的所有主要浏览器中都运行良好，在手机和平板电脑上也很好看。

最后一部分是我希望它在 IE8 中看起来不错。

我在 #3 (http://www.cognifide.com/blogs/mobile/responsibly-responsive-mobile-first-responsive-design-part-2/) 上读到这里，您可以使用条件 cmets 简单地为 IE9 和更低版本的桌面版本样式提供特定样式表。

我用我的桌面样式创建了 ie.css，并在 head 部分添加了这个条件注释但是没有运气，我仍然在 IE8 和更低版本中获得移动样式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">

<title>Page Title</title>

<link rel="stylesheet" href="style.css" media="all">

<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]-->

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

对出了什么问题有任何想法吗？我已经仔细检查了我的 ie.css 文件是否位于我的 index.html 旁边的目录中，就像 style.css 一样。还有其他原因这不起作用吗？谢谢，

【问题讨论】：

您是否检查了您的页面以查看您的 css 文件是否正确加载？
@BrianGlaz 如何在 IE 检查器中查看 css 文件是否正确加载？当我检查并查看 head 部分时，我没有看到加载 ie.css 文件的条件注释。我认为它应该在那里，但没有看到它。
好吧，我已经学会了如何使用 F12 Inspector Network 选项卡来查看页面正在加载的资源 (sitepoint.com/…) 它似乎没有加载 ie.css 文件。但为什么？它与 style.css 位于同一位置

标签： html css internet-explorer-8 responsive-design

【解决方案1】：

如果我没看错，你只是想针对 ie8？
首先，将 html5shiv 放在所有样式表之上...除非您的样式表实际上没有 ie 的样式。 html5shiv 需要首先呈现，这样它才能知道这些是元素，并且需要相应地设置它们的样式。
我仍然对您到底想要什么感到困惑，并且不确定您的目标是否低于 ie8，所以让我们修复 ie8 问题：


<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link rel="stylesheet" href="style.css" media="all">

<!--[if IE 8]>
  <link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->

EDIT
<!--[if lt IE 8]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]-->  
<![if !IEMobile]>   
<link rel="stylesheet" href="ie.css" media="all">
<![endif]>

我们所做的只是将 html5shim 移到所有样式表之上。然后是其他所有浏览器的样式表。然后是一个仅适用于 ie8 的样式表。然后是小于 ie 8 而不是 ie mobile 的样式表。
请注意：我将版本从小于 9 更改为小于 8，因此不可能相互交叉引用、相互取消/添加样式。
再说一次，我不清楚这就是你想要的，但这解决了我看到的问题。如果我误解了某些东西。
编辑：看起来手机不是（if !IEMobile）需要不同的语法，所以我假设单独尝试它们会解决它。这里是参考：http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx

【讨论】：

我已经尝试了你在这里建议的 (bit.ly/MvB2G4)，但我仍然可以在 IE8 中获得移动样式。
嗯。我正在寻找@mobile cc。看看我能挖出什么
我认为您需要不同的语法。我编辑了答案
万岁它现在正在引入 ie.css！它看起来有点乱，但我现在可以调整样式，因为我可以看到它们。它似乎没有引入 ie8.css 但也许我不需要它？谢谢！ respond.js 是一个更快的修复，但我很高兴知道没有它我也可以用另一种方式来解决。
idk 为什么 ie8 不工作。可能是轻微的语法错误。

【解决方案2】：

使用Respond.JS - 一个javascript polyfill 使css 媒体查询在IE8 中工作

【讨论】：

我已经将它用于另一个项目但有必要吗？这是一个非常简单的页面，它只显示内容。大多数观看它的人都会通过移动设备到达那里，所以我讨厌必须为 IE8 加载一个 js 库
没有什么是必要的，所以不是真的。你似乎已经愿意为 IE 加载额外的文件了。我喜欢使用它，因为它允许我现有的媒体查询也适用于 IE，而无需使用额外的 css 文件。无论哪种方式，它都是一个额外的静态资源。
我猜如果它只为 IE8 加载它并降低它本质上与加载额外文件的想法相同。我会试一试。仍然不确定为什么它没有加载我的 ie.css 文件。
我尝试添加 respond.JS (bit.ly/MvB2G4)，但由于某种原因它似乎也没有加载这些资源。我的条件评论有问题吗？
不完全是我想要的方式，但这种方法似乎对我有用 (javascriptoo.com/respond-js) 我的页面 (bit.ly/1aAxvS2)

【解决方案3】：

您的移动样式表中可能有未在您的 IE 表中贴花的样式。因此它们不会被覆盖。您可以在非 IE 样式表上排除移动样式表。

<!--[if !(IE)]><!--> <link rel="stylesheet" href="style.css" media="all"> <!--<![endif]-->
<!--[if (lt IE 9)&(!IEMobile)]><link rel="stylesheet" href="ie.css" media="all"><![endif]-->

【讨论】：

感谢您的尝试，但我已添加该行 ' ' 如上图还是不行。

【解决方案4】：

希望对你有所帮助，添加一些 jQuery 以在 ie8 以下版本中加载网页时删除响应式样式表，因此为 ie 8 及以下版本添加新样式表

if (jQuery.browser.version >= 8.0) {
    $('link[rel=stylesheet][href~="style.css"]').remove();
}

或者如果您需要响应 1.e8 0r 7，请确保在下方添加了这些元标记和脚本

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
 <![endif]-->

【讨论】：