正文中的背景图片：之前在IE浏览器无法正常工作 [英] background-image in body:before on IE not working

问题描述

我创建了一个带有使用过的body的网页设计：在标记拆分设计之前，类似于WordPress的TwentyFifteen主题（ https://wordpress.org/themes/twentyfifteen/ ）

但是我没有在左栏中使用颜色，但一个图像。该代码适用于所有浏览器（Chrome，FF，Safari），但不适用于IE（版本9-11）。

CSS看起来像：

  body :: before {
 background：url（img / back-left.jpg）no-repeat center top; 
 -webkit-background-size：cover; 
 -moz-background-size：cover; 
 -o-background-size：cover; 
 background-size：cover; 
 content：; 
 display：block; 
身高：100％; 
最低身高：100％; 
位置：固定; 
 top：0; 
剩下：0; 
宽度：30％; 
 z-index：1; 
} 
  

效果：背景图片没有显示，当用IE打开页面时。当我去一个子网站时，图片显示出来了。当我转换浏览器窗口时，图片显示。当我在IE开发工具栏中改变任何东西（不管是什么）时，图片显示。

如果我使用background-color而不是background（或background-image）它在IE中工作正常。

任何想法？我认为这听起来像一个渲染的东西。背景图片渲染得太晚了，所以没有显示（而是我在页面上进行交互）。但如何解决它？

解决方案

我发现了一个'解决方案'，遇到了另一个问题。 ; - ）

当我设置

  html，body {overflow ：auto; } 
  

然后，背景图像在IE 10和IE 11中显示正确。但是现在我有IE 11的平滑滚动问题（当使用鼠标滚轮时，背景图像会跳过所有的位置，使用滚动条时可以正常工作）。
无论如何，这个变体对我来说更好，而不是显示背景图像。所以我仍然希望，MS能够纠正平滑滚动的bug。

我用CodePen做了一个分支： http://codepen.io/anon/pen/rabMMm

（这是最初的CodePen代码： http://codepen.io/anon/pen/qEwEVy ）

或者有没有人知道一个解决方案来解决从IE浏览器平滑滚动？

I have created a webdesign with used body:before tag to 'split' the design, similar to the TwentyFifteen theme of WordPress (https://wordpress.org/themes/twentyfifteen/)

But I don't use a color for the "left" column, but an image. The Code works in all browsers fine (Chrome, FF, Safari) but not in IE (Version 9-11).

The CSS looks like:

body::before {
    background: url("img/back-left.jpg") no-repeat center top ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    content: "";
    display: block;
    height: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 30%;
    z-index: 1;
}

The effect: the background picture was not showing, when open the page with IE. When I go to a sub-site, the picture was showing. When I transform the browser windows, the picture was showing. When I change ANYTHING (no matter what) in IE Dev toolbar, the picture was showing.

If I use background-color instead of background (or background-image), it works fine on IE.

Any ideas? I think it sounds like a rendering thing. The background image was rendered too late and so was not showing (instead I interact everthing on the page). But how to fix it?

解决方案

I found a 'solution', that run into an other problem. ;-)

When I set

html, body { overflow: auto; }

Then, the background-image was displayed proper in IE 10 and IE 11. But now I have the IE 11 smooth scrolling problem (The background image jump all over the place when using the mouse wheel. When using the scrollbar, it works fine). Anyway, this variant is better for me, than not displaying the background-image. So I still hoping, that MS correct the smooth-scrolling bug.

I made a fork in CodePen with this correction: http://codepen.io/anon/pen/rabMMm

(this was the originally CodePen code: http://codepen.io/anon/pen/qEwEVy)

Or did any knows a solution to fix the smooth scrolling prolem from IE?

这篇关于正文中的背景图片：之前在IE浏览器无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！