网站主页仅显示背景颜色和页脚答案

【问题标题】：Home page in Website only displaying background color and footer网站主页仅显示背景颜色和页脚
【发布时间】：2018-02-26 02:45:00
【问题描述】：

这是我第一次在这里提问。我有一个使用下划线为 WordPress 主题构建的网站。在我的 MacBook 或我测试过的 iPhone 上，主页没有显示在 Safari 中。它在 Chrome、Firefox 和 Opera 中显示得很好。当我看着检查员时，我看不到任何表明正在发生的事情的东西。如果有人愿意查看 karialbro.com 并让我知道我缺少什么，我将不胜感激。

【问题讨论】：

标签： wordpress safari mobile-safari

【解决方案1】：

ID 为“hero”的元素没有任何高度或宽度规范

<div class="start-grid" id="hero" style="background-image: url(&quot;http://karialbro.com/wp-content/themes/karialbrocoach/images/BenchQuote.jpg&quot;);">

设置高度和宽度。这会因设备而异，因此使用 JavaScript 根据 innerWidth 和 innerHeight 设置此元素的宽度和高度

Chrome、Firefox 这些浏览器使用 web-kit 引擎并且没有高度和宽度规范

但其他浏览器（如 Microsoft Edge）没有它在 Chrome 中也适用于我，但在 Microsoft Edge 中无效，这表明您的问题没有高度或宽度规格，因为这是 IE 的已知问题，很可能是您没有在浏览器中获得背景的原因

【讨论】：

我有 100vw 和 100vh 分别分配给#hero。不知道为什么它没有显示在您的浏览器中。
网站在 SSL Socket (HTTPS) 上运行，但背景的 URL 使用的是不安全的 HTTP 协议，请确保背景也来自 HTTPS URL
查看以下错误混合内容：“”处的页面是通过 HTTPS 加载的，但请求了不安全的预取资源“”。此请求已被阻止；内容必须通过 HTTPS 提供。（索引）：8 混合内容：“karialbro.com”处的页面通过 HTTPS 加载，但请求了不安全的预取资源“karialbro.com/wp-content/themes/karialbrocoach/images/Desk.jpg”。此请求已被阻止；
我已将它们全部更改为“https”，但仍然无法呈现。
您是否尝试过以下方法：-webkit-height: 5.2vh; -moz 高度：5.2vh； -ms 高度：5.2vh； -o-高度：5.2vh；高度：41px； /* 后备 */ 如果这不能解决它，我不确定它可能是什么，但它在英国是凌晨 4 点，并且会称之为一个晚上

【解决方案2】：

我想通了。我为#hero 编写动画的方式将整个 div 保持在 0 不透明度。一旦我重新排列了样式表中的动画/过渡，它就起作用了。感谢您的帮助！

【讨论】：