背景尺寸覆盖IE11不覆盖全部区域 [英] background size cover IE11 not covering full area

问题描述

我要去bonkers。 IE11拒绝用背景图像填充DIV的整个区域，即使我已经将background-size属性设置为覆盖。请考虑以下示例：

I'm going bonkers. IE11 refuses to fill the entire area of a DIV with a background image, even though I've set the background-size property to cover. Consider the following example:

CSS：

.bg {
    width: 100%;
    min-height: 220px;
    background: url("bg.jpg") center top no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

HTML：

<div class="bg">bla</div>
<div class="bg">blabla<br />blabla</div>

Chrome，Firefox，Safari，Opera都会做我期望的：背景图片，bg。 jpg，总是覆盖DIV的整个可见区域，无论浏览器窗口的比例。

Chrome, Firefox, Safari, Opera all do what I expect to happen: the background image, bg.jpg, is always covering the full visible area of the DIVs, no matter what the proportions of the browser window are.

另一方面，IE11没有，而是在DIV的左侧和右侧有可见的空白（在我的例子中）。当我禁用background-attachment：fixed规则时，它工作，背景图像覆盖整个区域。有固定的，它不。 sadface。

IE11 on the other hand does not, instead there are visible gaps (in my case) on the left and right hand side of the DIVs. When I disable the "background-attachment: fixed" rule, it works and the background image covers the whole area. With fixed, it does not. sadface.

这是一个特定于我正在开发的网站的问题，因为我知道IE11通常没有问题，但我看不到任何东西导致这。它使我的大脑受伤。我想要发布一个链接到该网站，但我不能。如果您需要进一步的示例或有任何问题，请不要犹豫。

It is DEFINITELY a problem specific to the website I'm working on, as I know IE11 usually has no problem with this, but I cannot see anything that would cause this. It's making my brain hurt. I'd love to post a link to said website, but I can't. If you need further examples or have questions, please don't hesitate to ask.

任何帮助/建议都非常感谢。谢谢！

Any help/suggestions are highly appreciated. Thanks!

UPDATE：实际上，它似乎background-size：当background-attachment设置为fixed时，覆盖被IE11完全忽略。叹息。

UPDATE: actually, it seems background-size: cover is ignored totally by IE11 when background-attachment is set to fixed. sigh.

更新2：一些截图（希望）说明这个问题。在IE中，背景看起来是固定的，但不覆盖它应该覆盖的区域。

UPDATE 2: some screenshots that (hopefully) illustrate the problem somewhat. In IE the background appears to be fixed, but not covering the area that it should.

推荐答案

我已经设法通过应用以下CSS来解决这个问题。我不是100％的幸福，但它必须做的。

I've managed to fix the issue by applying the following CSS. I'm not a 100% happy with it, but it'll have to do.

如果任何人遇到相同的问题，请测试此修复程序，它可能会工作，这取决于您的方案，也许不会。

If anyone runs into the same issue, test this fix, it may work depending on your scenario, maybe it won't.

.bg {
    ...
    background-size: 100% 100%;
}

圣螃蟹鞋在棍子上...好吧，这是有点尴尬。

Holy crab-shoe on a stick ... well, this is kinda embarrassing.

问题是：IE已缩小。

解决方案：放大。

CSS一直运行良好。

The CSS was working fine all along.

这篇关于背景尺寸覆盖IE11不覆盖全部区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！