在IE中的页面宽度背景不总是加载

我有一个网站在开发中使用图像作为整个网站的背景。在FF和Safari中正常工作。但IE浏览器遇到了一些麻烦。有时它根本不加载图像，有时它已被部分加载，有时会在一两秒后加载。在IE中的页面宽度背景不总是加载

除此之外，我发现的IE证明黑客事实证明是不是IE浏览器证明是被说成是。有关如何使用图像作为纯CSS中网站的完整背景的任何想法？

我已经剥离了html/css到可能的相关部分;完整的例子就是在http://www.topografieindeklas.nl/home

的HTML

<body> 
<div id="header"> 
    <div id="headerWrap" class="alignCenter"> 
     <p>Topografie</p> 
    </div><!-- end headerWrap --> 
</div><!-- end header --> 

<div id="menu"> 
    <div id="menuWrap" class="alignCenter"> 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li 
     </ul> 
    </div><!-- end menuWrap --> 
</div><!--- end menu --> 

<div id="page"> 
    <div class="pageBrandingWrap"> 
     <div class="pageBranding alignCenter"> 
      <h1>Title</h1> 
     </div> 
    </div><!-- End pageBrandingWrap --> 

    <div class="entrytextWrap"> 
     <div class="entrytext alignCenter"> 
      <h2><?php the_title(); ?></h2> 
      <?php the_content(); ?> 
     </div> 
    </div><!-- End entrytextWrap --> 
</div><!-- end page --> 

<div class="clear"></div> 
    <div id="footer"> 
     <div id="footerWrap" class="alignCenter"> 

     </div><!-- end footerWrap --> 
    </div> 
</body> 

</html>

的CSS

/* Correct/normalize default browser styles */ 
@import url('style/normalize.css'); 
/* Import the open sans font */ 
@import url(http://fonts.googleapis.com/css?  family=Open+Sans:300italic,400italic,600italic,400,300,700,800,600); 

*{ 
margin:0px; 
padding:0px; 
} 
html{ 
min-height: 100%; 
background-size: cover; 
background-image: url(style/img/masterBG.jpg); 
background-repeat: no-repeat; 
background-position: right bottom; 
background-attachment:fixed; 
} 
body{ 
min-height:100%;/*Corrects the full image background*/ 
font-family:Arial, Helvetica, sans-serif;; 
font-size:14px; 
text-align: center; 
} 
#header, #branding, #menu, #page, #footer{ 
width:100%; 
} 
#header{ 
margin:20px 0 0 0; 
background: rgb(255, 255, 255) transparent;/* Fallback for web browsers that doesn't support RGBa */ 
background: rgba(255, 255, 255, 0.75);/* RGBa with 0.6 opacity, for non-stupid browsers */ 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BFFFFFFF, endColorstr=#BFFFFFFF);/* For IE 5.5 - 7*/ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#BFFFFFFF, endColorstr=#BFFFFFFF)";/* For IE 8*/ 
} 
#headerWrap, #brandingWrap, #menuWrap{ 
width:900px; 
font-family: 'Open Sans', sans-serif; 
}

来源

2012-08-14 Dennis Hunink

您正在使用IE更大的图片遇到的问题是超时问题。然而，尽管你是不是第一次报告< 10秒像超时，msdn正式指定至少30秒：

Internet Explorer imposes a time-out limit for the server to return data. 
By default, the time-out limit is as follows: 
Internet Explorer 4.0 and Internet Explorer 4.01  5 minutes 
Internet Explorer 5.x and Internet Explorer 6.x  60 minutes 
Internet Explorer 7 and Internet Explorer 8  60 minutes 

When the server is experiencing a problem, Internet Explorer does not 
wait endlessly for the server to return data. 

Applications that use the WinINet API directly will experience the 
following ReceiveTimeout values: 

WinINet.dll version 4.x    5 minutes 
WinINet.dll versions 5.x and 6.x  60 minutes 
WinINet.dll versions 7.x and 8.x  30 seconds

正如指出的这个MSDN你ALS可能要检查您的注册表：
HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings对于名为ReceiveTimeout的密钥，如果它存在，则删除。 '在野外'它通常由'InstallAware'或'WebUI Studio'等软件设置，以防止'他们的安装者被卡住'。但他们不会重置它。

然而，在现实生活中，HTTP/1.1的Keep-Alive行为或连接的坏/古老设置通常会成为服务器端问题：HTTPS连接的关闭语义。

我有时在SO上看到的其他解决方案之一是将图像切成2或4个较小的图像。我不想套用其他人的工作（'偷'半个网站），所以显然我不允许你指出答案链接。使用谷歌并在SO上搜索“延迟加载”脚本。

祝你好运！

PS：在我个人的经验，我已经看到了IE经常呛（过度）采用主动CSS玩具的喜欢DXImageTransform

来源

2012-08-14 22:27:46 GitaarLAB

感谢您的解释！在搜索了更多内容之后，考虑到您的帖子，我决定退出纯CSS全图像背景解决方案，并改用JavaScript解决方案。正如你可以在这里看到的：http://topografieindeklas.nl/home/。现在的问题是IE不会听Z-index。我知道这是IE中的一件大事，但在SO和其他地方提出的解决方案并不能给出正确的结果。有什么想法吗？ – 2012-08-15 10:30:56

您正在讨论IE6＆7的着名z-index问题。 [在这里]（http://stackoverflow.com/questions/1156192/internet-explorer-z-index-bug）这[链接]（http://caffeineoncode.com/2010/07/the-internet-explorer -z-index-bug /）被认为是最准确的解释！至于你的评论中的问题：我可能仍然会尝试使用css，定位一个容器顶部/左边的0px，其中包含一些定位的div，其中包含剔除背景的部分，并将其上面的其余部分，仍然使用Z指数，并依靠在HTML中的编码顺序，牺牲一个SEO有点 – GitaarLAB 2012-08-15 16:26:33

嗨，GitaarLAB，只是因为我用你的评论，发现他们非常有用，我认为这将是一件很好的事情，让你回到你身边更多。我做了BG技巧，使用Z-index，甚至在IE中工作。非常感谢！结果在http://topografieindeklas.nl/home/上。我会在超时工作上做更多的工作。延迟加载似乎不是适当的解决方案，因为我将来可能会使用数十个不同的图像。但是你给了我一些方向前往！感谢那！ – 2012-08-20 08:33:16

在IE中的页面宽度背景不总是加载

回答

相关问题