我有一个正在开发的网站,它使用图像作为完整网站的背景。在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;
}
答案 0 :(得分:1)
您在IE中遇到更大图片时遇到的问题是超时问题。 然而,虽然您不是第一个报告&lt; 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连接的关闭语义。
我在SO上看到的其他解决方案之一就是将图像切成2或4个较小的图像。我不想解释其他人的工作(“窃取半个网站”),所以显然我不允许指向你的答案链接。使用谷歌并在SO上搜索“延迟加载”脚本。
祝你好运!!ps:根据我的个人经验,我看到IE经常窒息(过度)使用像DXImageTransform这样的活跃css玩具