我如何在不固定附件的情况下使IE10中的background-size:cover工作? [英] How can I make background-size:cover work in IE10 without making attachment fixed?
问题描述
我的代码:
html
{
background-image:url('img.png');
background-repeat:no-repeat;
background-position:center top;
background-size:cover;
}
这在Firefox和Chrome上完美运行，但在IE上图像完全没有拉伸.如果将背景附件设置为固定"，它将起作用，但这不是我想要的.
This works perfectly on Firefox and Chrome, but on IE the image doesn't get stretched at all. It will work if I set background-attachment to "fixed" but that isn't what I want.
我浏览过的每个网站都声称这些特性在IE中是完美实现的，但显然不是.
Every website I've looked at claims that these proprties are perfectly implement in IE, but they clearly aren't.
推荐答案
对CSS背景尺寸覆盖问题进行排查
在不查看其他代码或网站的情况下进行故障排除会有些困难，但是您可以尝试以下一些方法.
Troubleshoot CSS Background Size Cover
It's a bit hard to troubleshoot without seeing additional code or the website, but here are some things you can try.
-
尝试添加background-attachment:scroll;而不是留空
Try adding background-attachment:scroll; instead of leaving it blank
您的文档类型是否正确，或者是否有错字?
Is your doctype correct, or does it have typos?
HTML标记上是否还有其他脚本或样式可能会干扰/覆盖背景样式?
Are there other scripts or styles on the HTML tag that may be interfering/overwriting the background style?
按F12键打开开发人员工具"，然后单击HTML标记以查看列出了哪些样式.在网站上切换CSS样式以获取关键元素可以帮助您解决问题. 如果您使用的是IE开发人员工具，请检查文档模式"是否为和/或浏览器模式"设置为较旧的浏览器. (IE6，IE7和IE8无法识别background-size:cover，并且将以其原始大小显示背景-
Hit F12 to open Developer Tools, and click on the HTML tag to see what styles are listed. Toggling the CSS styles on an off for key elements on your site can help you troubleshoot the problem. If you are in IE Developer Tools, check to see if "Document Mode" and/or "Browser Mode" are set to an older browser. (IE6, IE7 and IE8 don't recognize background-size:cover, and will show the background in its original size - Can I Use support table.)
您的背景仅填充浏览器窗口，而不扩展到覆盖文档页面/可滚动区域吗?尝试在HTML和BODY标签中添加height:100％，width:100％，margin:0和padding:0. ( default HTML和BODY标记的样式不同.HTML的大小由浏览器窗口控制，而BODY会环绕内容，而不管内容是否小于浏览器窗口，或展开过去.)还要尝试将背景切换到BODY或包装标签.
Is your background only filling the browser window, and not expanding to cover the document page/scrollable areas? Try adding height:100%, width:100%, margin:0 and padding:0 to your HTML and BODY tags. (The default HTML and BODY tags have different styles. The HTML size is controlled by the browser window, while the BODY will wrap around the contents, regardless if the contents are less than the browser window, or expands past it.) Also try switching the background to the BODY, or the wrapper tag.
为帮助进行故障排除，请仅使用HTML，BODY和wrapper标签(如果使用包装器)制作基本的测试页，然后查看是否可以使背景正常运行.这将帮助您缩小错误的范围.包装器可能也需要高度和宽度.根据您的线框(DIV或CSS表，HTML表)，可能需要:min-height:100％and min-width:100％，或者height:100％and width:100％.
To help troubleshoot, make a basic test page with the HTML, BODY and wrapper tag only (if you use a wrapper), and see if you can get the background to function properly. This will help you narrow down the bug. Your wrapper may need a height and width too. Depending on your wireframe (DIV or CSS Table, HTML Table), it may need: min-height:100% and min-width:100%, or height:100% and width:100%.
我用您提供的css创建了一个简单的html页面，不包含背景附件，并使用<!DOCTYPE html>作为doctype.背景效果很好，并且完全覆盖了Windows Vista/IE9，Windows 7/IE10和Windows 8/IE11中的屏幕.
I created a simple html page with the css you provided, did not include a background-attachment, and used <!DOCTYPE html> as the doctype. The background worked well and fully covered the screen as expected in Windows Vista/IE9, Windows 7/IE10 and Windows 8/IE11.
侧面说明:适用于IE7和IE8
这篇关于我如何在不固定附件的情况下使IE10中的background-size:cover工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
