css 样式通过 ssl 消失

Question

当通过 SSL 连接时，特定样式将从样式表中删除。我想不出任何押韵或理由，但它是一贯丢弃的相同样式。也许值得注意的是，要隐藏的元素 display:none;是可见的。列表样式也恢复为默认浏览器设置，并且一些背景图像(不是全部)也被删除。所有 URI 路径都是相对的——既来自页面头部，也来自样式表本身。

例如下面的作品...

body { background: url(../images/bg-yellowstripes.jpg) repeat 0 0; }

然而，下一行并没有...

#masthead { background: url(../images/bg-header.jpg) repeat-x 0 100%; }

谁有这方面的经验可以帮助页面正常显示并避免 IE 混合内容警告？顺便说一句，只影响 Internet Explorer。 Firefox、Safari、Chrome 都能正常呈现页面，没有任何 SSL 警告。

Answer 1

听起来您正在使用绝对路径加载 CSS 文件。例如，如果您有一个要通过 HTTP 和 HTTPS 提供服务的站点，您应该改用相对路径。

绝对:(不要这样做，通过 SSL 查看时 IE 会发出安全警告)

<link rel="stylesheet" href="http://mydomain.com/css/style.css" />

相对:

<link rel="stylesheet" href="/css/style.css" />

如果样式来自另一个域(例如 CDN)，请使用双斜杠而不是指定协议(protocol)。这将导致路径在发出 CSS 请求时继承请求页面所使用的协议(protocol)。

<link rel="stylesheet" href="//otherdomain.com/css/style.css" />

此外，使用 IE 开发人员工具。他们会准确地告诉您哪些网络资源正在从页面加载，哪些是 SSL 下的，哪些不是。