在捆綁中使用優化時，Chrome並沒有採用CSS媒體查詢

Question

正如我在標題中提到的那樣 - chrome沒有提取媒體查詢。例如：

@media only screen and (min-width: 481px) and (max-width: 784px) 
@media (min-width: 481px) and (max-width: 784px) 

它的工作原理，如果我離開只是一個width屬性：

@media only screen and (min-width: 481px) 

所有其他瀏覽器發現這一點確定。你們中有沒有人來過這個問題，可以幫助我走上正軌？

編輯

我使用的是最新版本的Chrome（版本32.0.1700.76米）

Answer 1

有鍍鉻，它不會不正確的間距讀取媒體查詢的錯誤。如果您查看捆綁的源代碼（縮小時），您可能會注意到@media (min-width: 481px) and (max-width: 784px)已被轉換爲@media (min-width: 481px)and (max-width: 784px)（注意了支架後的缺失空間）。

This article說明問題很好，也是一種修復基本上是創建一個實現IBundleTransform一類並實現Process此時您可以檢查這個問題並解決它：

public class CssMinifyMQ : IBundleTransform { 
    public void Process(BundleContext context, BundleResponse response) { 
     response.ContentType = "text/css"; 
     response.Content = Regex.Replace(response.Content, "(\\) and ()?\\()", ") and ("); 
    } 
} 

bundles.Add(
    new Bundle("~/CSS/Base", new CssMinifyMQ()).Include("~/Content/Base/*.css") 
); 

HTH！