Question

我想只为较低的媒体查询提供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]-->

Answer 1

是的，得到了它。似乎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]-->

仅加载IE的较低媒体查询

1 个答案: