Question

当我在IE 5.5,6.0,7.0和8.0中测试网站时，会加载一个空白页面。该网站在Firefox，Safari，Opera和Chrome中运行良好。我认为这个问题与条件评论有关。

以下是我的源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chris Schnitzer | Home</title>
<link href="home.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.homewrap').hover(function() {
        $(this).children('.front').stop().animate({ "top" : '200px'}, 500);
    }, function() {
        $(this).children('.front').stop().animate({ "top" : '0'}, 300);
    });
});
</script>


<!--[if IE5]>
<style type="text/css">
/* place haslayout fix for IE 5* in this conditional comment */
#headerright, #mainContenttext, #mainContentrigheducation, #mainContentrightexpertise { height: 1%; }
</style>
<![endif]-->

<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#headerright, #mainContenttext, #mainContentrighteducation, #mainContentrightexpertise { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</syle>
<![endif]--> 

</head>

<body>
<div id="container">
<div id="header">
         <div id="headerleft"><!-- #BeginLibraryItem "/Library/logo.lbi" -->
<a href="index.html"><img src="assets/images/logo.png"  width="135" height="77" alt="chris schnitzer logo" /></a><!-- #EndLibraryItem -->
    </div>

    <div id="headerright">
    <div id="topnav"><!-- #BeginLibraryItem "/Library/topnav.lbi" --><ul>
    <li><a href="index.html">Home</a>|<a href="Whatido/index.html">What I Do</a>|<a href="portfolio/index.html">Portfolio</a>|<a href="contactme/index.html">Contact Me</a></li>
     </ul><!-- #EndLibraryItem --></div>
    </div>
    </div>

    <div id="greetingandintrowrap">
<div id="greetingtext">Hello, Gutentag, Sawubona!</div>
    <div id="intro">
      <h4>I am Chris and thank you for taking your time to view my portfolio</h4>
    </div>
</div>


  <div id="mainContent">
<div id="mainContenthome">
  <a href="Whatido/index.html"><div class="homewrap">
    <img src="assets/images/whatidohomepgback.png" width="200" height="200" alt="What I Do" />
    <img src="assets/images/whatidohomepgfront.png" class="front" width="200" height="200" alt="What I Do" />
    </div></a>

  <a href="portfolio/index.html"><div class="homewrap"> 
    <img src="assets/images/portfoliohomepgback.png" width="200" height="200" alt="Portfolio" />
    <img src="assets/images/portfoliohomepgfront.png" class="front" width="200" height="200" alt="Portfolio" />
    </div></a>

  <a href="contactme/index.html"><div class="homewrap">
    <img src="assets/images/contactmehomepgback.png" width="200" height="200" alt="Contact Me" />
    <img src="assets/images/contactmehomepgfront.png" class="front" width="200" height="200" alt="Contact Me" />
    </div></a>
  <br class="clearfloat" />
</div>
</div>

  <div id="footercontent">
<p>I have a <span class="bolddarkblue">passion</span> for designing visually appealing content<span class="bolddarkblue"></span> 
      that <span class="bolddarkblue">communicates </span> your message whether it is for print or the web using 
      HTML,  CSS, JQuery and Flash to design <span class="bolddarkblue">Standard Compliant</span> websites.</p>
</div>
  <div id="footer"><div id="altlogo"><!-- #BeginLibraryItem "/Library/altnav.lbi" -->

<a href="index.html"><img src="assets/images/smalllogo.png" width="41" height="24" alt="chris schnitzer logo" /></a>
</div>

<div id="altnav">
<ul>

<li><a href="index.html">Home</a></li>
<li><a href="Whatido/index.html">What I Do</a></li>
<li><a href="portfolio/index.html">Portfolio</a></li>
<li><a href="contactme/index.html">Contact Me</a></li>
</ul>
</div></div><!-- #EndLibraryItem -->
</div>
</body>
</html>

Answer 1

在上一次IE条件评论中，您没有正确关闭<style>元素：

<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#headerright, #mainContenttext, #mainContentrighteducation, #mainContentrightexpertise { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</syle>
<![endif]-->

测试网站，空白页面出现

1 个答案: