在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中的頁面寬度背景不總是加載

回答

相關問題