html - 获取 IE8 条件样式表以进行响应式网页设计

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

我创建了一个移动设备优先的响应式网页。它在我喜欢的所有主要浏览器中运行良好,在手机和平​​板电脑上看起来也不错。

最后一部分是我希望它在 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/

相关文章:

html - 为什么在body上使用BFC功能时无法清除 float ?

javascript - 在动态元素上设置背景图像

jQuery Internet Explorer 获取 "Object doesn' t 支持此属性或方法”

security - IE8 安全警告

html - 将 SVG 转为 webfont

android - Firefox 36.0/Linux 无法从我自己的本地服务器播放 WebVTT

javascript - 如何为 slider 中的进度条设置动画

html - 为什么标准规则必须是最后?

html - 如果 float 图像不存在,则标题宽度应调整

jQuery 在 IE8 anchor 标记中添加它自己的 session 属性?