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

在IE8及以下版本中根本不支持

Media queries。

对于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＆lt; 9的样式表，你可以在其中调整特定于IE＆lt; 9的样式。为此，您应该在代码中添加以下HTML：

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