Question

[安装程序：Azure上的ASP.NET MVC 3，通过HTTPS为CSS文件和资产提供Azure Blob存储]

我目前正在创建一个网站，根据所选主机选择合适的CSS样式表 - 这允许网站启用不同的品牌，所有品牌都由CSS改变，但由引用主机控制。该机制使用检测主机的MVC控制器，然后重定向（使用ASP.NET重写规则）以从单独的位置引用CSS文件和关联的资产（即图像）。例如：

来自 www.host1.com 的请求将引用来自的CSS文件   myCssAndAssets.mycoreserver.com/css/ www.host1.com

来自 www.host2.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假设图像托管在源主机上，而Chrome正确引用CSS文件位置的图像。

这非常像IE客户端问题，但我的搜索（虽然并非详尽无遗）并没有取得丰硕成果。我知道我可以使用绝对路径，但这是我想要避免的，因为可能有大量的CSS文件需要维护......

感谢任何帮助或想法。

Answer 1

所以在午餐时间披萨后，我根据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>

希望这可以帮助别人......

使用IE从其他主机获取CSS图像路径

1 个答案: