IE 11 上伪元素 ::before 的绝对背景答案

【问题标题】：Absolute background on pseudo-element ::before on IE 11IE 11 上伪元素 ::before 的绝对背景
【发布时间】：2015-09-09 07:29:38
【问题描述】：

我的问题很奇怪。我有container::before 的背景，绝对定位，并且在每个浏览器上都能完美运行。

在 IE 11 上，当我第一次加载页面时，我的背景只占用了容器的宽度（两边都不可见）。当我打开调试器或移动窗口时，侧面会显露出来。

我尝试了this hack，但它不起作用。

.connexion-layout {
    position: relative;
    overflow: hidden; 
}
.connexion-layout .container {
    padding-top: 200px;
    padding-bottom: 200px; 
}

.connexion-layout .container::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: none no-repeat center center / cover; 
}

@media screen and (min-width: 980px) {
    .connexion-layout .container::before {
        background-image: url("../../theme/images/connexion-bg-desktop.jpg?1433411383"); 
    } 
}
@media screen and (max-width: 979px) {
    .connexion-layout .container::before {
        background-image: url("../../theme/images/connexion-bg-mobile.jpg?1433411383"); 
    } 
}

你有过这样的经历吗？

【问题讨论】：

除非你有 Sass->CSS 编译问题，只发布编译后的 CSS。
你找到答案了吗？我有完全相同的东西！
除了静态之外，您总是需要在父元素上设置定位，否则它将使用第一个元素，直到到达主体。通常一个使用`position: relative;`

标签： html css internet-explorer internet-explorer-11

【解决方案1】：

将position: relative; 添加到父级为我修复了这个完全相同的错误。

【讨论】：

哈哈。我应该仔细看看代码。如果这真的是问题所在，我会非常生气。令我困惑的是为什么它会在重绘时自行纠正。人们会认为这将是跨浏览器的问题......
我知道，我真的认为这个错误与 IE 有关，而不是预期的行为，尤其是当我对它大喊大叫时它会重新绘制！
@MikeGleasonjrCouturier 这似乎解决了我在伪元素中使用多个 CSS 背景时遇到的问题（某些图像在我调整窗口大小之前不会显示），其中伪元素有position: fixed;。谢谢。
@MikeGleasonjrCouturier 实际上，我想我会说这是“部分解决”了我的问题……它使图像立即显示出来。但在 IE11 中以固定背景图像而闻名的“滚动闪烁”问题现在正在发生。
就我而言，bg 图像根本没有显示；我用谷歌搜索并被带到这个页面。但我能够解决：如果有人遇到此问题并在父级上添加 position: relative 不起作用 - 我只有 right 属性集。一旦我还指定了left，我的背景图像就会按预期显示。

【解决方案2】：

当您说“当我调整窗口大小或打开控制台时它会自行纠正”时，您实际上是在说“强制浏览器重绘”。

我还没有遇到过这个确切的问题，但不久前我确实在 Chrome 中遇到过类似的 webfonts 问题。这与加载顺序有关。

因此，根据这些信息，我猜测因为浏览器按顺序呈现事物，它会先呈现 :before 元素，然后是父元素。但是，:before 元素的位置基于父元素（它尚未加载），因此它会转到下一个可用的定位元素。当您调整大小时，一切都已加载，所以一切正常。

我会尝试两件事。

首先，如果可以的话，将它移动到 :after 元素。那可能会解决它。由于它是绝对定位的，因此 :before 与 :after 无关紧要。

如果这不可能，您可以使用 javascript/jquery repaint hack。

if($('html').hasClass('ie11')) {
  $('.connexion-layout').hide(0, function(){$(this).show()});
}

或者，您可以在 CSS 中尝试此操作。将其加载到 CSS 的底部。同样，这适用于字体，但无论如何它都应该强制重绘：

.ie11 body {
  animation-duration: 0.1s;
  animation-name: repaint;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-delay: 0.1s;
}

@-webkit-keyframes repaint {
  from { opacity: 1; }
  to { opacity: 1; }
}

jquery 和 css 都假设您在 <html> 上有一个 ie11 类名，这样您就不会不必要地重新绘制其他浏览器。

我目前没有 PC，如果这些都不起作用，请告诉我，我会找到我的 BrowserStack 登录并试一试。

【讨论】：