0

我的代码：

html
{
background-image:url('img.png');
background-repeat:no-repeat;
background-position:center top;
background-size:cover;
}

这在 Firefox 和 Chrome 上完美运行，但在 IE 上，图像根本不会被拉伸。如果我将背景附件设置为“固定”，它将起作用，但这不是我想要的。

我看过的每个网站都声称这些属性在 IE 中完美实现，但显然不是。

4

1 回答 1

5

CSS 背景尺寸封面疑难解答

如果不查看其他代码或网站，很难进行故障排除，但您可以尝试以下一些方法。

  1. 尝试添加背景附件：滚动；而不是留空

  2. 您的文档类型是否正确，或者是否有拼写错误？

  3. HTML 标签上是否有其他脚本或样式可能会干扰/覆盖背景样式？

  4. 按 F12 打开开发者工具，然后单击 HTML 标签查看列出的样式。关闭网站上关键元素的 CSS 样式可以帮助您解决问题。如果您在 IE Developer Tools 中，请检查“文档模式”和/或“浏览器模式”是否设置为旧版浏览器。（IE6、IE7 和 IE8 无法识别 background-size:cover，并且会以原始大小显示背景 -我可以使用支持表吗。）

  5. 您的背景是否仅填充浏览器窗口，而不是扩展以覆盖文档页面/可滚动区域？尝试将 height:100%、width:100%、margin:0 和 padding:0 添加到您的 HTML 和 BODY 标签。（默认的HTML 和 BODY 标签有不同的样式。HTML 的大小由浏览器窗口控制，而 BODY 会环绕内容，无论内容是否小于浏览器窗口，或者扩展超过它。）也尝试切换BODY 或包装标签的背景。

  6. 为了帮助排除故障，请仅使用 HTML、BODY 和 wrapper 标签（如果您使用 wrapper）制作一个基本测试页面，并查看是否可以让背景正常运行。这将帮助您缩小错误范围。您的包装器也可能需要高度和宽度。根据您的线框（DIV 或 CSS 表、HTML 表），它可能需要：min-height:100% 和 min-width:100%，或 height:100% 和 width:100%。

我使用您提供的 css 创建了一个简单的 html 页面，不包含背景附件，并用作<!DOCTYPE html>doctype。在 Windows Vista/IE9、Windows 7/IE10 和 Windows 8/IE11 中，背景运行良好并完全覆盖了屏幕。

旁注：IE7 和 IE8 的完整后台堆栈溢出解决方案

于 2013-10-06T00:59:20.280 回答