CSS @import不适用于Shopify

目前正在构建Shopify主题，我正在使用Gridset进行网格布局。我的问题是，对于IE 8/9，它需要使用一些CSS @ import，但是他们似乎并没有工作，因为网格只打破了那些版本。CSS @import不适用于Shopify

对于一个标准的网站，你会简单做以下

@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的工作，或经过验证的替代品？

任何帮助将非常感谢！

来源

2015-07-10 user2498890

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的造型为此，您应该添加以下HTML到您的代码：

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

来源

2015-07-10 16:11:21

Gridset使用这些CSS导入来解决IE8上缺少媒体查询支持的问题。我的问题是CSS导入不能与Shopify一起使用。这通常会在标准网站上运行，但我不确定如何使其与Shopify合作。感谢您的详细回复，但 – user2498890

@ user2498890：AFAIK，媒体查询完全无法在IE8中运行，包括导入语句。但是，媒体查询的这种具体用途记录很差，而我自己也没有尝试过。是否可能gridset使用JS下的引擎来获取媒体查询来处理import语句？另外，是否有可能提供您想要实现的在线演示？这可以更容易地找出具体用例中出现的问题。 –

我所知道的是，Gridset有一个解决方案，使IE8的网格工作，但它会在我的情况下工作，但Shopify /液体相关的东西导致网格无法正常工作。我假设要么我写错了液体标签，要么你不能在css.liquid文件上使用CSS导入？ – user2498890

CSS @import不适用于Shopify

回答

相关问题