CSS圖像尋路

[設置：ASP.NET MVC 3在Azure上與Azure的Blob存儲爲CSS文件和資產超過HTTPS]CSS圖像尋路

我目前正在創建一個網站，根據選擇的主機選擇一個適當的CSS樣式表 - 這允許網站啓用不同品牌，所有品牌都由CSS修改，但由引用主機控制。該機制使用MVC控制器來檢測主機，然後重定向（使用ASP.NET重寫規則）從單獨的位置引用CSS文件和相關資產（即圖像）。例如：從

請求www.host1.com將從www.host2從 myCssAndAssets.mycoreserver.com/css/ www.host1.com

請求引用一個CSS文件.COM將引用一個CSS文件 myCssAndAssets.mycoreserver.com/css/ www.host2.com

除了一個小問題，這完全可以工作，使用Internet Explorer時，事情會中斷。簡而言之，Internet Explorer成功獲取CSS文件，但無法引用該文件中引用的任何圖像。在這裏，所有圖像都使用到實際CSS文件的相對路徑引用，則假設是（從W3C）...

不完整的URL（如[RFC1808]）相對於所述基座解釋樣式表的URL，而不是相對於源文檔的基本URL。

使用的尋路的一個例子（該文件是在同一目錄中已被重定向到CSS文件）...

background-image: url('icon-big-buttons.png');

在Chrome和Firefox，事情像預期的那樣圖像從與CSS文件相同的位置被回收。以下是Fiddler的屏幕截圖 - 前四項來自IE，最後三項來自Chrome - 這些請求均來自同一個網站。

注意：爲了澄清，'Css'是控制器MVC站點，然後重定向到Azure Blob存儲中的CSS文件。

Internet Explorer mushing things up!

這裏IE是假設圖像被源主機上承載，而鉻正確地將圖像從CSS文件的位置的引用。

這感覺非常像一個IE客戶端問題，但我的搜索（雖然幾乎沒有窮盡）沒有成果。我知道我可以使用絕對路徑功能，但是這是我想避免因爲可能有大量的CSS文件，以保持...

讚賞任何幫助或想法。

來源

2014-10-17 SeanCocteau

你認爲放在一個CSS文件中的相對路徑是相對於CSS文件的路徑正確。我不知道任何版本的IE的行爲與此不同。 – 2014-10-17 09:48:05

嗯，我沒有找到這個評論（http://stackoverflow.com/a/7366516/698427），但沒有進一步解釋或緩解... – SeanCocteau 2014-10-17 10:18:29

我很確定問題是位於別的地方。如果它是真實的並且無論如何都將被修復，那麼這種問題將在很大程度上被記錄。由於某種原因，顯然只有IE出現問題，但我懷疑它與CSS文件中的相對路徑有關。更好地開始尋找另一個可能的原因。 – 2014-10-17 10:30:10

所以在午餐時間之後，我根據BartDude的建議重新審視了這個問題 - 這次專門研究了重寫規則，因爲它看起來是在運行消毒測試後導致問題的原因。

總之，我使用重寫規則從核心站點重定向到CSS和資產。對於所有瀏覽器，但IE瀏覽器這工作得很好。沒有執行重定向，而是直接引用Css和資產 - IE打得不錯。

我的解決方案是利用第二個重寫規則，所以一個重定向CSS，另一個重定向到實際資產的路徑。此規則將繞過控制器並導航到適當的主機。

<rules> 
    <!-- first rule used to redirect from the controller to the style sheet --> 
    <rule name="csstoazure" stopProcessing="true"> 
     <match url="css-source/(.*)" /> 
     <action type="Redirect" url="https://myCssAndAssets.blob.core.windows.net/css/{R:1}" /> 
    </rule> 

    <!-- second rule to capture images referenced in the style sheet but using the host name --> 
    <rule name="cssieplayingnice" stopProcessing="true"> 
     <match url="Css\/(.*\.png|.*\.gif|.*\.jpg|.*\.eot|.*\.htc)" /> 
     <action type="Redirect" url="https://myCssAndAssets.blob.core.windows.net/css/{HTTP_HOST}/{R:1}" /> 
    </rule> 
</rules>

希望這可以幫助別人......

來源

2014-10-17 13:24:05 SeanCocteau

回答

相關問題