Question

我有一个项目，其背景图像不会在IE中显示，除非你在它之间放置一个空格而不重复。当你放置它确实显示但是扭曲的空间。此背景图片适用于Firefox和Chrome。

直播链接：http://www.mastisolcostanalysis.com/survey

CSS：

#app-wrapper{
width: 1024px;
height: 768px;
min-height:100%;
margin: 0px auto;
/*margin-top: -384px;
position: relative;
top: 50%;*/
text-align: left;
background: url(../img/ui-frame.png)no-repeat;
overflow: hidden; 
background-size: 100%;
    }

任何帮助将不胜感激！

Answer 1

我发现问题是背景图像是大小问题。这是2048 x 1536。

http://www.mastisolcostanalysis.com/img/ui-frame.png

您应该将其大小调整为1024 x 768（正如您在＃app-wrapper上定义的那样）。

IE8无法像现代浏览器那样扩展图像。

Answer 2

使用此

background: url('../img/ui-frame.png') no-repeat;

Answer 3

将背景图像放在图像标记（）中并为其添加一个类。在HTML结构中的＃app-wrapper元素正上方添加此标记。像这样设置图像标签的样式：

img.bg { 
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}

Answer 4

好的，看起来您的网站设置方式存在重大问题。当我开始通过FF中的Web Developer扩展编辑CSS时，我发现你只是将内容堆叠在彼此绝对定位的顶部，并且像疯了一样z-indexed。为什么这些不是单独的页面？我真的认为你的很多问题都要处理你所经历的绝对定位和z索引的数量。

我注意到，当我处理事物时，我对背景定位以及某些东西的处理方式感到不安。

我会诚实地将每个内容部分分解到他们自己的页面中，我认为仅此一点就可以帮助您将指南针指向正确的方向，以确定您的IE问题。

另外，我强烈建议在photoshop或类似的东西中自己缩放图像。它的全尺寸是2048x1536，但你试图强制它是1024x768。这也可能导致很多问题。

祝你好运。

Answer 5

此网站帮助我使用IE8并且运行良好

http://css-tricks.com/perfect-full-page-background-image/

背景图片不会出现在IE8或更低版本中，但可以在Firefox和Chrome中使用

5 个答案: