Question

我的问题非常奇怪。我有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"); 
    } 
}

你有没有这样的事情？

Answer 1

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

Answer 2

当你说＆＃34;当我调整窗口大小或打开控制台时，它会自行纠正。你实际上是在说＃34;强迫浏览器重画＆＃34;。

我还没有遇到过这个确切的问题，但我确实在Chrome中有一个类似于Chrome浏览器的webfonts。这与装货顺序有关。

所以，根据这些信息，我会猜测，因为浏览器按顺序呈现内容，它会先渲染：在元素之前，然后是父元素。但是，在元素的位置之前是基于父元素（它还没有加载），所以它转到下一个可用的定位元素。当你调整大小时，一切都被加载，所以没关系。

我会尝试两件事。

首先，如果可以，请将其移至：after元素。这可能会解决它。因为它绝对定位，所以：在vs之前：之后不应该重要。

如果不可能，你可以使用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的类名，这样你就不会不必重新绘制其他浏览器。

我目前没有电脑，所以请告诉我这些是否有效，我会发现我的BrowserStack登录并给它一个旋转。

关于伪元素的绝对背景::在IE 11之前

2 个答案: