CSS @import 不适用于 Shopify

Question

目前正在构建一个 Shopify 主题，我正在使用 Gridset 进行网格布局。我的问题是，对于 IE 8/9，它需要使用一些 CSS @import，但它们似乎不起作用，因为网格仅在这些版本上中断。

对于标准站点，您只需执行以下操作

@import url("gridset-ie-a-spans1.css") only screen and (min-width:1025px);

我已尝试通过执行以下操作来适应 Shopify，但没有成功:

@import url("{{ 'gridset-ie-a-spans1.css' | asset_url }}") only screen and (min-width:1025px);

还有

@import url("{{ 'gridset-ie-a-spans1.css' | asset_url | stylesheet_tag }}") only screen and (min-width:1025px);

都没有成功!

有没有人知道如何成功地让@imports 工作，或者有经过验证的替代方案？

非常感谢任何帮助!

Answer 1

Media queries IE8 及以下版本完全不支持。

对于 IE9，您应该能够在 HTML 中执行此操作:

<link rel="stylesheet" type="text/css" href="gridset-ie-a-spans1.css" media="screen and (min-width:1025px)" />

要添加对 IE8 的支持，您可以使用多种 JS 解决方案中的一种。例如，this library可以添加仅使用以下代码添加对 IE8 的媒体查询支持:

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

Respond是另一个做同样事情的库。将该库添加到您的 HTML 的代码是相同的:

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

如果您不喜欢基于 JS 的解决方案，您还应该考虑添加一个仅适用于 IE<9 的样式表，您可以在其中调整特定于 IE<9 的样式。为此，您应该将以下 HTML 添加到您的代码中:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->