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

回答

相關問題