0

我有一个正在开发的网站，它使用图像作为整个网站的背景。在 FF 和 Safari 中运行良好。但是 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;
}
4

1 回答 1

1

您在 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 上指出的那样，您可能还想检查您的注册表：
HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings是否有一个名为 的键ReceiveTimeout，如果存在则删除。“在野外”它通常由“InstallAware”或“WebUI Studio”等软件设置，以防止“他们的安装程序被卡住”。但他们不会重置它。

然而，在现实生活中，它经常被证明是服务器端问题，HTTP/1.1 的 Keep-Alive 行为或连接的错误/古老设置：HTTPS 连接的关闭语义。

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

祝你好运！！

ps：在我个人的经验中，我看到 IE 经常扼杀（过度）使用像 DXImageTransform 这样的活动 css 玩具

于 2012-08-14T22:27:46.357 回答