爲什麼使用SSL時我的CSS樣式的渲染會改變？

Question

我正在更新我的服務器以通過HTTPS而不是HTTP訪問我的Web應用程序。它的工作，但我的一些CSS樣式呈現不同。

• CSS文件是加載 - 最我的風格在那裏。
• 還有沒有資產控制檯無法加載的報告。
• 所有網址已更新爲HTTPS。

如果由於代碼中存在不正確的（HTTP而不是HTTPS）URL而導致失敗，它不會顯示在瀏覽器中。

例如，我使用的是Bootstrap，我有split button dropdown。在非HTTPS網站上，它看起來不錯。在HTTPS站點上，它使用右側的按鈕（與脫字符號）呈現大約1/2的高度。我通過瀏覽器挖掘了元素，它看起來像高度只是沒有正確計算子元素。邊距，填充和字體大小都是相同的。

我已經使用Chrome的開發者控制檯瀏覽了DOM，並將工作版本與錯誤版本並排比較，我找不到差異。

我已經在Chrome和Firefox中打開了頁面，並在兩個頁面中找到相同的問題。

我可能錯過了簡單的東西，但我無法弄清楚它是什麼。有什麼建議麼？

編輯

另一條線索浮出水面：我碰到this answer to a different question並檢查了DOCTYPE。事實證明，HTTP網站在開始處有一個doctype標籤：`但HTTPS網站沒有（這很奇怪，因爲它在我的代碼中）。所以這是一個重要的區別，我會做更多的工作來確定標籤的去向。 FWIW，我使用的Apache2通過與URL重寫反向代理服務的網頁...

Answer 1

嘗試改變網址，您有任何協議，在你的CSS資源要麼HTTPS或留空白：

http://somedomain.com/style.css => https://somedomain.com/style.css 

OR

http://somedomain.com/style.css => //somedomain.com/style.css 

這可能是在你的HTML和CSS文件的網址。

Answer 2

事實證明，DOCTYPE是問題。顯然，Apache在作爲mod_proxy_html的反向代理服務器時，默認情況下會從該頁剝離DOCTYPE。我找到了基本解決方案here，然後查看了official documentation的詳細信息。