网页底部红色背景出现空白、CSS校验图不显示及div stray标签错误求助

1. 修复HTML语法报错 #

报错原因是HTML末尾</body>标签前多了一行没有对应起始标签的</div>，直接删除该行即可解决校验报错。

2. 修复底部红色背景间隙问题 #

间隙由两个原因导致：

• 浏览器默认给body设置了上下外边距，给body添加样式重置即可：

body {
  margin: 0;
  padding: 0;
  /* 保留原有background-image配置 */
}

• 块级元素默认边距溢出：footer、.copyright块内的<p>标签自带默认上下外边距，会撑开透明间隙，统一控制边距即可：

.footer p, .copyright p {
  margin: 8px 0;
}

• 底部校验图片所在的<p>标签没有设置红色背景，也不属于.copyright容器内，你可以把这个标签挪到.copyright内部，或者给它添加对应背景样式：

.validator-wrap {
  margin: 0;
  background-color: #f6130d;
  text-align: center;
  padding-bottom: 10px;
}

给对应p标签添加class="validator-wrap"属性即可。

3. 修复CSS校验图片无法显示问题 #

原有资源链接用了http协议，现在浏览器默认拦截非加密的混合内容加载，把对应a标签和img标签的链接前缀从http修改为https即可正常显示。

内容的提问来源于stack exchange，提问作者Landon Byrd