gpt4 book ai didi

css - 如何使背景大小为 :cover work in IE10 without making attachment fixed?

转载 作者:太空宇宙 更新时间:2023-11-03 20:49:08 25 4
gpt4 key购买 nike

我的代码:

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

这在 Firefox 和 Chrome 上完美运行,但在 IE 上图像根本不会被拉伸(stretch)。如果我将 background-attachment 设置为“fixed”,它会起作用,但这不是我想要的。

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

最佳答案

CSS 背景尺寸覆盖问题排查

在没有看到额外代码或网站的情况下进行故障排除有点困难,但这里有一些您可以尝试的方法。

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

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

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

  4. 按 F12 打开开发人员工具,然后单击 HTML 标记以查看列出的样式。为站点上的关键元素切换 CSS 样式可以帮助您解决问题。如果您使用的是 IE 开发人员工具,请检查“文档模式”和/或“浏览器模式”是否设置为较旧的浏览器。 (IE6、IE7 和 IE8 不识别 background-size:cover,并将以其原始大小显示背景 - Can I Use 支持表。)

  5. 您的背景是否只填满浏览器窗口,而没有扩展到覆盖文档页面/可滚动区域?尝试将 height:100%、width:100%、margin:0 和 padding:0 添加到您的 HTML 和 BODY 标签中。 (default HTML 和 BODY 标签有不同的样式。HTML 大小由浏览器窗口控制,而 BODY 将包围内容,无论内容是否小于浏览器窗口,或展开通过它。)也可以尝试将背景切换到 BODY 或 wrapper 标签。

  6. 为帮助解决问题,制作一个仅包含 HTML、BODY 和 wrapper 标记的基本测试页(如果您使用 wrapper),看看您是否能让后台正常运行。这将帮助您缩小错误范围。您的 wrapper 可能也需要高度和宽度。根据您的线框(DIV 或 CSS 表格、HTML 表格),它可能需要:min-height:100% 和 min-width:100%,或 height:100% 和 width:100%。

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

旁注:Full background Stack Overflow solution for IE7 and IE8

关于css - 如何使背景大小为 :cover work in IE10 without making attachment fixed?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17883280/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com