获取IE8条件样式表，以便响应web设计工作

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

如果我没看错，你只想把目标对准ie8？

首先，将html5shiv放在所有样式sheets...unless之上--您的样式表实际上没有ie的样式。html5shiv需要首先呈现，这样它就可以判断ie是哪些元素，并且需要相应地对它们进行样式设计。

我仍然对您想要的是什么感到困惑，也不确定您的目标是否小于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的样式表。接下来是不到IE8的样式表，而不是ie移动版。

注意:我将版本从小于9改为小于8，因此没有可能相互交叉引用，相互取消/添加样式。

再说一遍，我不清楚这是你想要的，但这解决了我看到的问题。如果我误解了什么。

编辑:看起来mobile (if !IEMobile)需要不同的语法，所以我假设单独尝试它们将修复它。以下是参考资料：http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx

Answer 2

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

Answer 3

希望它能帮助您，在web页面加载到下面的版本中时，添加一些jQuery来删除您的响应样式表，所以为ie 8及以下版本添加新的样式表。

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

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

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