我创建了一个移动设备优先的响应式网页。它在我喜欢的所有主要浏览器中运行良好,在手机和平板电脑上看起来也不错。
最后一部分是我希望它在 IE8 中看起来不错。
我在这里阅读了 #3 ( http://www.cognifide.com/blogs/mobile/responsibly-responsive-mobile-first-responsive-design-part-2/ ),您可以简单地为 IE9 提供特定样式表,并使用条件注释降低桌面版本样式。
我用我的桌面样式创建了 ie.css,并在头部部分添加了这个条件注释,但是没有运气,我仍然在 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 一样。还有其他原因这行不通吗? 谢谢,
最佳答案
如果我没看错的话,你只想定位 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以下,这样就没有机会互相引用,互相取消/添加样式了。
再一次,我不清楚那是你想要的,但这解决了我看到的问题。 lmk 如果我误解了什么。
编辑:看起来移动设备不需要(if !IEMobile
)需要不同的语法,所以我假设尝试将它们分开会修复它。这是引用:http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx
关于html - 获取 IE8 条件样式表以进行响应式网页设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21611343/