多个子域名中CSS中的协议相对URL

Question

我们的PHP驱动网站最近添加了SSL证书以支持HTTPS协议，但我们在IE6到IE8上遇到了问题，尽管我们的页面没有通过HTTP调用资源。

我已经阅读了这篇文章：http://paulirish.com/2010/the-protocol-relative-url/ 因此，基本上，我需要替换所有的

标签为 </p>。

background: url('/images/whatever.gif');

使用：

background: url('//www.mydomain.com/images/whatever.gif');

我不太喜欢在数百个CSS文件中使用我的域名，但是如果我这样做：对于我的开发、测试和预发布环境，它们都与生产站点不同的子域上，最佳实践是什么？我需要在CSS文件中使用域名的动态表示，可能是从某种配置文件驱动，但是如何实现？

- IanBussieres

---

你确定在包含CSS文件时使用了https吗？据我所知，你不需要使用这个技巧。 - George

George说得一点也没错。似乎CSS文件本身是通过HTTP请求而非HTTPS。请检查您的<link href> URL。它应该是协议相对的。 - BalusC

Answer 1

您无需添加主机名即可使用协议相对URL。您已经使用的表单是协议相对的，因为它没有指定协议。

您遇到了哪些问题？您是否通过测试确认使用带有域名的URL将解决您的问题？

附注：如果您有数百个CSS文件，您可能会更喜欢动态生成系统，但这是一个单独的问题。

- Ned Batchelder

Answer 2

问题是IE6、7、8中弹出窗口，提示页面中存在混合内容（应为https页面中包含的http资源）。Chrome、FF4及以上版本和IE9不会显示这些弹窗，这是正确的。没有包含任何http资源。

几篇博客文章似乎将背景URL指向了这个问题的源头。其中一篇文章（http://blogs.msdn.com/b/ieinternals/archive/2009/06/22/https-mixed-content-in-ie8.aspx）有一条MSFT的Eric Law的评论，他说：

引用： 调试器报告触发提示的URL如下： "about:/images/lightview/inner_slideshow_play.png" 当然，这个URL在您的标记中实际上并不存在。看起来是动态创建一个IFRAME并将内容注入到该框架中。空帧的默认URL为about:blank，这导致了提示。

...

其他需要注意的问题：在IE6中，我们将“about:blank”视为不安全内容，以及“javascript:”和“res:”。在IE7中，我们修复了“about:blank”的情况，但我们尚未更改javascript和res。

因此，问题已知，并由微软确认其旧版浏览器创建一个IFRAME并注入内容，然后生成错误。

大多数解决方法都指向使用协议相对URL，就像我展示的第一个URL一样。我不确定您是否可以将“background：url('/images/whatever.gif');”视为无协议调用，因为这是臭名昭着IE6至8的错误之一。

--编辑：正在寻找解决方案。我们在JavaScript文件中发现了这个问题，似乎从一开始就是真正的问题。

<input target="_blank"class="sub" type="button" style="background-image:url(../images/name.gif);">

- IanBussieres

Answer 3

好的！明白了。

顺便说一下，如果有人遇到需要找出IE6、IE7或IE8在https网页上出现混合内容错误的确切问题的情况，请使用此脚本：http://www.enhanceie.com/dl/scriptfreesetup.exe

最后，问题出在我上一篇帖子中提到的按钮上。将其更改为导入的类，将background-image换成background，并且去掉开头的../就解决了问题。

感谢大家的帮助，我仍然会标记Ned的回答，因为它有些帮助。

- IanBussieres