【问题标题】:background size cover IE11 not covering full area背景大小覆盖IE11不覆盖整个区域
【发布时间】:2014-03-24 16:38:31
【问题描述】:

我要疯了。 IE11 拒绝用背景图像填充 DIV 的整个区域,即使我已将 background-size 属性设置为覆盖。考虑以下示例:

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 的整个可见区域。

另一方面,IE11 没有,而是在 DIV 的左侧和右侧存在可见的间隙(在我的情况下)。当我禁用“背景附件:固定”规则时,它可以工作并且背景图像覆盖整个区域。固定,它没有。悲伤的脸。

这绝对是我正在处理的网站特有的问题,因为我知道 IE11 通常对此没有问题,但我看不到任何会导致此问题的东西。它让我的大脑受伤。我很想发布指向上述网站的链接,但我不能。如果您需要更多示例或有任何疑问,请随时提出。

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

更新:实际上,当背景附件设置为固定时,IE11 似乎完全忽略了背景大小:封面。叹息。

更新 2:一些屏幕截图(希望)在一定程度上说明了问题。在 IE 中,背景似乎是固定的,但没有覆盖它应该覆盖的区域。

【问题讨论】:

  • 你有 JSFiddle 吗?
  • @FranciscoCorrales 我愿意,但问题是,准系统 jsfiddle不会 出现此问题。正如我上面所说,这个问题似乎特定于我正在从事的项目。但也许其他人以前也经历过同样的事情?
  • mm,好吧,也许是一些图像?截图?
  • 我添加了两张图片。希望它有所帮助:) 并且只是为了澄清,背景是指背景图像。

标签: css internet-explorer-11 background-size


【解决方案1】:

我已经通过应用以下 CSS 解决了这个问题。我对它不是 100% 满意,但它必须这样做。

如果有人遇到同样的问题,请测试此修复程序,它可能会根据您的情况起作用,也可能不会。

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

棍子上的圣蟹鞋……嗯,这有点尴尬。

问题是: IE 被缩小了。

解决方案:放大。

CSS 一直运行良好。

【讨论】:

  • IE11 显然在 Windows 10 上默认放大到 125% ......或者高分辨率屏幕的一些奇怪的显示缩放。
猜你喜欢
  • 1970-01-01
  • 2013-05-04
  • 2022-01-26
  • 2023-03-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-12-26
  • 2016-09-26
相关资源
最近更新 更多