html - 使用 IE 从不同主机获取时的 CSS 图像路径

Question

[设置:Azure 上的 ASP.NET MVC 3 以及用于通过 HTTPS 的 CSS 文件和 Assets 的 Azure Blob 存储]

我目前正在创建一个网站，该网站根据所选的主机选择适当的 CSS 样式表 - 这允许网站启用不同的品牌，所有品牌都由 CSS 更改，但由推荐主机控制。该机制使用检测主机的 MVC Controller ，然后重定向(使用 ASP.NET 重写规则)以从单独的位置引用 CSS 文件和相关 Assets (即图像)。例如:

Requests from www.host1.com will reference a CSS file from myCssAndAssets.mycoreserver.com/css/www.host1.com

Requests from www.host2.com will reference a CSS file from myCssAndAssets.mycoreserver.com/css/www.host2.com

除一个小问题外，这工作完美，使用 Internet Explorer 时会出现问题。简而言之，Internet Explorer 成功获取了 CSS 文件，但它无法引用该文件中引用的任何图像。在这里，所有图像都使用实际 CSS 文件的相对路径进行引用，假设是(来自 W3C )...

Partial URLs (as defined in [RFC1808]) are interpreted relative to the base URL of the style sheet, not relative to the base URL of the source document.

使用的路径示例(文件与已重定向到的 Css 文件位于同一目录中)...

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

在 Chrome 和 Firefox 中，从与 CSS 文件相同的位置检索图像的情况与预期的一样。以下是 Fiddler 的屏幕截图 - 前四个条目来自 IE，后三个条目来自 Chrome - 这些请求来自同一站点。

注意:为了澄清起见，“Css”是 Controller MVC 站点，然后重定向到 Azure Blob 存储中的 CSS 文件。

此处 IE 假设图像托管在源主机上，而 Chrome 正确地从 CSS 文件的位置引用图像。

这感觉很像 IE 客户端问题，但我的搜索(虽然并非详尽无遗)并未取得成果。我知道我可以使用绝对路径，但这是我想避免的事情，因为可能需要维护大量 CSS 文件...

感谢任何帮助或想法。

Answer 1

因此，在吃完午餐吃完披萨后，我按照 BartDude 的建议重新审视了这个问题——这次专门研究了重写规则，看起来正是这些规则在运行经过 sanitizer 的测试后导致了问题。

简而言之，我使用重写规则从核心站点重定向到 CSS 和 Assets 。对于除 IE 之外的所有浏览器，这都可以正常工作。不执行重定向，而是直接引用 Css 和 Assets - IE 运行良好。

我的解决方案是利用第二个重写规则，一个重定向 CSS，另一个重定向到实际 Assets 的路径。然后，此规则将绕过 Controller 并导航到适当的主机。

<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>

希望这可以帮助其他人...