获取IE8条件样式表，使响应式Web设计正常工作
[英]Get IE8 conditional style sheet for responsive web design to work
问题描述
我创建了一个移动的第一个响应式网页。 它在我喜欢的所有主流浏览器中都很漂亮，并且在手机和平板电脑上看起来也很不错。
最后一部分是我希望它在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一样。 还有其他原因这不起作用吗？ 谢谢，
4 个解决方案
解决方案1
1 2014-02-06 18:58:43
使用Respond.JS - 一个javascript polyfill使css媒体查询在IE8中工作
解决方案2
1 已采纳 2014-02-07 07:06:10
如果我读得正确，你只想针对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
解决方案3
0 2014-02-06 18:55:41
希望它会帮助你，添加一些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]-->
解决方案4
0 2014-02-06 19:11:49
您可以在移动样式表中使用未在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条件样式表会影响所有IE
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.