Question

我创建了一个移动优先响应式网页。它在我喜欢的所有主流浏览器中都很漂亮，在手机和平板电脑上看起来也很不错。

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

我在这里阅读了＃3（http://www.cognifide.com/blogs/mobile/responsibly-responsive-mobile-first-responsive-design-part-2/）你可以简单地为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一样。还有其他原因这不起作用吗？谢谢，

Answer 1

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

Answer 2

如果我读得正确，你只想定位ie8？
首先，将html5shiv置于所有样式表之上......除非你有样式表，字面上没有样式。首先需要渲染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的样式表。然后是低于8的样式表，而不是移动。
请注意：我将版本从小于9改为小于8，因此没有相互交叉引用的机会，相互取消/添加样式。
再一次，我不清楚那是你想要的，但这解决了我看到的问题。如果我误解了什么的话编辑：看起来移动不是（if !IEMobile）需要不同的语法，所以我假设单独尝试它们将修复它。这里的参考：http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx

Answer 3

希望它会帮助你，添加一些jQuery来删除你的响应式样式表，当网页加载到ie8以下的版本时，所以为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]-->

Answer 4

您的移动样式表中的样式可能不会在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]-->

获取IE8条件样式表，使响应式Web设计正常工作

4 个答案: