css - 只为 IE 加载较低的媒体查询

标签 css internet-explorer-7 media-queries conditional-statements

我只想为 IE7 提供较低的媒体查询(因为我不想修复所有较高的布局),但我无法获得条件标签来处理它。我做错了什么吗?

我使用过 respond.js (https://github.com/scottjehl/Respond),所以它应该没问题,但是条件标签会阻止所有浏览器加载更高的媒体查询。

应该发生的是所有浏览器都应该加载所有媒体查询,而 IE7 及以下版本应该只加载我的 601.css 和 768.css 样式表

<link rel="stylesheet" type="text/css" media="all" href="http://www.example.com/style.css" />
<link rel="stylesheet" href="http://www.example.com/mq/601.css" type="text/css"  media="(min-width: 601px)"/>
<link rel="stylesheet" href="http://www.example.com/mq/768.css" type="text/css"  media="(min-width: 768px)"/>   

<!--[if gt IE 7]>
    <link rel="stylesheet" href="http://www.example.com/mq/1024.css" type="text/css"  media="(min-width: 1024px)"/>
    <link rel="stylesheet" href="http://www.example.com/mq/1280.css" type="text/css"  media="(min-width: 1280px)"/> 
    <link rel="stylesheet" href="http://www.example.com/mq/1600.css" type="text/css"  media="(min-width: 1600px)"/>
<![endif]-->

最佳答案

好的,知道了。似乎 gt IE 7 只包括所有 IE 向上。相反,我们还需要包括非 IE 的浏览器。

所以...

<!--[if (gt IE 7)|!(IE)]><!-->
    <link rel="stylesheet" href="http://www.example.com/mq/1024.css" type="text/css"  media="(min-width: 1024px)"/>
    <link rel="stylesheet" href="http://www.example.com/mq/1280.css" type="text/css"  media="(min-width: 1280px)"/> 
    <link rel="stylesheet" href="http://www.example.com/mq/1600.css" type="text/css"  media="(min-width: 1600px)"/>
<![endif]-->

关于css - 只为 IE 加载较低的媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11179272/

相关文章:

将两个 block 放在同一行中的 css 设置

html - 滚动区域外的元素

html - 具有 contenteditable 属性的 Span 在 IE11 中不会表现为内联元素

jquery - IE7 不会在绝对定位的表单中居中内联输入

javascript - 在页面加载时需要在特定字段上设置光标并自动打开键盘而不触摸文本字段

css - IE7 文本被下推

javascript - Internet Explorer 7 Google map 呈现问题

CSS:2016 年使用嵌套媒体查询安全吗?

reactjs - 移动 View 上的 CSS 格式设置有问题

javascript - 使用 JavaScript 查找定义的媒体查询