css - 向 ie8 显示媒体查询的内容

标签 css responsive-design

有一个相当古老的article on smashing magazine (技术 3)表示,如果您开始这样的媒体查询:

@media 屏幕,所有和(最小宽度:300px)

那么理解媒体查询的浏览器将理解整个媒体查询,其中较旧的 ie 将忽略“all and”之后的所有内容。所以理论上较旧的 ie 仍然可以看到查询中的所有内容。对于 ie6 和 ie7 来说这是惊人的真实,但不幸的是 ie8 忽略了查询中的所有规则。

这很不幸,因为如果我们能得到

我们可以使用 Jeremy Keiths example 做类似的事情这涉及将布局内容移动到单独的样式表中,并使用条件注释将其提供给旧版 IE。

这种方法的问题是我的 css 模块被分割成不同的样式表。这违背了 OOCSS 和 SMACSS 中的原则(它们非常有用!)

有一个 JS Fiddle where someone has tried to crack it但想知道是否有人对如何执行此操作有任何想法?

最佳答案

感谢@cimmanon 的评论,这使我找到了解决方案。

使用 .less 我可以拥有

global.less - 这里面有我所有的 CSS,包括我所有的断点。断点设置为较少的变量。 compiled.less - 这会导入 global.less 并编译成一个 css 文件 Compiled-belowie8 - 这会导入 global.less 并编译成一个 css 文件,但我已将最宽布局的媒体查询变量更改为“无”,因此在这个布局中没有媒体查询。

然后,在我使用条件注释为所有浏览器提供 compiled.css 时,除了

关于css - 向 ie8 显示媒体查询的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13497745/

相关文章:

css - 等效于使用 Qt 或 GTK 生成平铺 png 的 CSS 网格模板列

html - 使三列 HTML 响应

css - 根据流体跨度的宽度在 Bootstrap 中创建方形

javascript - 当容器文本中的最后一个文本行达到目标边距时,如何重新启动滚动标记?

javascript - 上传到虚拟主机时,html 图像未加载

css - 如何根据长度减小字体大小?

html - 如果宽度小于 100%,则填充图像?

css - 手持设备上的屏幕宽度溢出

javascript - 如何正确设置 Accordion 的高度以使文本适合

javascript - Jquery Animate Image 在单击事件上向右,然后在第二次单击事件上返回到左侧