【问题标题】:Website Displays fine on Chrome/Firefox/IE 9+ but White Page on IE 8网站在 Chrome/Firefox/IE 9+ 上显示正常,但在 IE 8 上显示白页
【发布时间】:2013-10-17 18:23:42
【问题描述】:

我正在处理一个页面,但我似乎无法弄清楚为什么它没有显示在 IE 8 上。如果我右键单击并查看源代码,页面代码正在加载,但整个页面只是显示为空白和白色。

我似乎无法弄清楚,因为它在 Firefox、Chrome 和 IE 9 及更高版本中显示良好。有人遇到过这种情况/可以看到我的代码有什么问题吗?

页面:http://kozyheat.com

代码:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Kozy Heat Fireplaces</title>
    <meta name="description" content="For over 35 years, our commitment to quality and customer satisfaction remain the same. We offer a complete line of gas & wood fireplaces, unique cabinets and stylish accessories to complement any decor.">
    <meta property="og:site_name" content="Kozy Heat Fireplaces"/>
    <meta property="og:title" content="Kozy Heat Fireplaces"/>
    <meta property="og:description" content="For over 35 years, our commitment to quality and customer satisfaction remain the same. We offer a complete line of gas & wood fireplaces, unique cabinets and stylish accessories to complement any decor."/>
    <meta property="og:image" content="http://kozyheat.com/img/desktop/facebooklogo.png">
    <meta name="viewport" content="width=device-width">
    <script src="/scripts/js/desktop/jquery-1.10.2.min.js"></script>
    <script src="/scripts/js/desktop/bootstrap.min.js"></script>
    <script src="/scripts/js/desktop/modernizr-2.6.2.min.js"></script>
    <script src="/scripts/js/desktop/selectivizr-min.js"></script>
    <link rel="stylesheet" href="/css/desktop/bootstrap.min.css">
    <link rel="stylesheet" href="/css/desktop/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="/css/desktop/font-awesome.min.css">
    <link rel="stylesheet" href="/css/desktop/main.css">


    <link rel="shortcut icon" href="/img/favicon/favicon.png">
    <!--[if lte IE 9]>
    <link rel="stylesheet" href="/css/desktop/main_ie8.css"/>
    <![endif]-->
    <script>


      var backgroundInfo = [
        {"imgURL": "/media/13631/dassel1.jpg", "URL": "product/dassel", "Name": "Dassel", "Description": "Keep the home fires burning with the Dassel gas fireplace. Numerous customizing options to fit any d&#233;cor."},
        {"imgURL": "/media/13660/northernfirelights2.jpg", "URL": "product/northern_firelights_patio_fireplace_table", "Name": "Northern Firelights Patio Fireplace Table", "Description": "What could be better than relaxing by, dining around or simply just enjoying the beauty of a patio fireplace table."},
        {"imgURL": "/media/13624/bayport3.jpg", "URL": "product/bayport-l", "Name": "Bayport-L", "Description": "Our most popular 42” fireplace is now available in a Clean Face version. The Bayport-L offers a large and impressive viewing area with our most realistic logs and burner system yet. This fireplace is ordered in either the Log Set model or the Glass Media model."},
        {"imgURL": "/media/13654/minnetonka3.jpg", "URL": "product/minnetonka", "Name": "Minnetonka", "Description": "The Minnetonka fireplace offers you a deeper firebox and an exterior-controlled &quot;heat-dump&quot; feature."}
      ];

      $(window).load(function() {
        updateBackground(1);
      });

    </script>
    <script src="/scripts/js/desktop/main.js"></script>
    <script>function detectMobile() {
        var e = navigator.userAgent.toLowerCase();
        var t = mobiles;
        var n = false;
        for (var r = 0; r < t.length; r += 1) {
          if (e.indexOf(t[r]) != -1) {
            n = t[r]
          }
        }
        return n
      }
      $(function() {
        if (detectMobile()) {
          window.location.href = "http://kozyheat.com/mobile/"
        }
      });
      var mobiles = ["midp", "240x320", "blackberry", "netfront", "nokia", "panasonic", "portalmmm", "sharp", "sie-", "sonyericsson", "symbian", "windows ce", "benq", "mda", "mot-", "opera mini", "philips", "pocket pc", "sagem", "samsung", "sda", "sgh-", "vodafone", "xda", "palm", "iphone", "ipod", "ipad", "android"]</script>
  </head>
  <body class="container-fluid">
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-8302527-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
      })();
    </script>
    <div class="row-fluid">
      <aside class="span3">
        <a href="/" class="nostyle"><img id="logo" src="/img/desktop/logo.png" alt="Kozy Heat Fireplaces"></a>

        <div class="fluid-row">
          <div class="span10 offset1">
            <h3>Our Story</h3>
            <p>For over 35 years, our commitment to quality and customer satisfaction remain the same. We offer a complete line of gas &amp; wood fireplaces, unique cabinets and stylish accessories to complement any decor.</p>
            <a href="/about_us" class="btn btn-dark pull-right">Read More</a>
          </div>
        </div>
        <div class="fluid-row">
          <div class="span10 offset1">
            <h3>Upgrade Today</h3>
            <p>Ask us about our ways to upgrade your fireplace today with a SIT Proflame Remote control.</p>
            <a href="/contact_us" class="btn btn-dark">Get Started</a>
          </div>
        </div>

      </aside>
      <div class="span9 clearMargin">

        <nav class="row-fluid">
          <a href="/about_us" class="btn btn-topnav">About Us</a>
          <a href="/products" class="btn btn-topnav">Products</a>
          <a href="/find_a_dealer" class="btn btn-topnav">Find A Dealer</a>
          <a href="/support" class="btn btn-topnav">Support</a>
          <a href="/architects_builders" class="btn btn-topnav">Architects &amp; Builders</a>
          <a href="/contact_us" class="btn btn-topnav">Contact Us</a>
        </nav>

        <section class="main clearfix">

          <div class="box">
            <div class="row-fluid" style="height:100%">
              <section class="column">
                <div id="imageRotator" class="row-fluid">
                  <span class="imgRotArrowLeft" onClick="updateBackgroundPrev();">‹</span>
                  <h2 id="imgRotName" class="clearMargin"></h2>
                  <p id="imgRotDesc"></p>
                  <a href="#" id="imgRotBtn" class="btn btn-light pull-right">Learn More</a>
                  <span class="imgRotArrowRight" onClick="updateBackgroundNext();">›</span>
                </div>
              </section>
            </div>
          </div>

        </section>
        <footer class="row-fluid">
          <div class="span3">
            <a class="nostyleW margR20" href="https://twitter.com/kozyheatfire" target="_blank"><i class="icon-twitter icon-3x"></i></a>
            <a class="nostyleW margR20" href="https://www.facebook.com/KozyHeatFireplaces" target="_blank"><i class="icon-facebook icon-3x"></i></a>
            <a class="nostyleW margR20" href="http://www.linkedin.com/company/2624342" target="_blank"><i class="icon-linkedin icon-3x"></i></a>
            <a class="nostyleW margR20" href="http://www.youtube.com/user/KozyHeatFireplaces" target="_blank"><i class="icon-youtube icon-3x"></i></a>
          </div>
          <div class="span8">
            <div class="row-fluid clearPadding" style="padding-bottom:5px;">
              <a class="W" href="about_us">About Us</a> | 

              <a class="W" href="products">Products</a> | 
              <a class="W" href="find_a_dealer">Find a Dealer</a> | 
              <a class="W" href="support">Support</a> | 
              <a class="W" href="architects_builders">Architects &amp; Builders</a> | 
              <a class="W" href="contact_us">Contact Us</a> | 
              <a class="W" href="dealers_login">Dealers Secured Area</a>
            </div>
            <div class="row-fluid clearPadding">
              <strong>&copy; 2013 Hussong MFG &mdash; 204 Industrial Park Drive / Lakefield, MN 56150 / <a class="W" href="tel:1-800-253-4904">800-253-4904</a></strong>
            </div>
          </div>
        </footer>
      </div>
    </div>
  </body>
</html>

更新: 我确保没有缓存(手动重置,设置为退出时重置,然后运行 ​​CCleaner)。我还通过这个 Fixit 重置了所有 IE 8 设置:http://windows.microsoft.com/en-us/windows-vista/reset-internet-explorer-8-settings 这是我的问题的截图:

【问题讨论】:

  • 只是为了让您知道。我在 IE8 或 IE7 中都没有问题。
  • 点击几个链接,有时会随机加载几个页面,然后点击几下后就会停止。
  • 使用 IE8 和 IE7 为我工作。您确定您的 IE8 没有缓存问题吗?确保清空 IE 中的缓存,然后重试。

标签: javascript html css internet-explorer-8


【解决方案1】:

好的,我终于找到了解决方案。 Selectivizr 导致与 IE 8 中的 font-face 发生冲突,详见此处: Why is selectivizr.js causing "white screen of death" in IE8?

所以解决方案是只为非 IE 8 的浏览器提供 selectivzr...这有点违反直觉,但它现在有效。

代码:

<!--[if !IE 8]><!-->
<script src="/scripts/js/desktop/selectivizr-min.js"></script>
<!--<![endif]-->

【讨论】:

    【解决方案2】:

    将文档类型更改为 html 4

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    

    【讨论】:

    • 试过了,还是没有骰子;同样,我不久前所做的仅 html 模型上的页面似乎与 HTML 5 doctype 配合得很好。
    【解决方案3】:

    在更新网站并刷新大量内容以查看更新是否有效时,缓存是一个重要因素。很多时候您可能会查看旧缓存,这似乎就是问题所在。

    清除缓存并删除所有数据。关闭 IE。再次打开。现在它应该可以工作了。在此处查看说明:http://kb.wisc.edu/page.php?id=12314

    确保在更改网站代码时定期清除缓存,否则您总是会冒着风险,因为您认为自己修复了某些东西(或认为自己没有修复),但实际上您只是查看旧缓存。这可能会导致问题,因此请确保在更新网站时经常清除缓存。

    附言你的网站看起来很不错。向你致敬! :)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-01-11
      • 1970-01-01
      • 1970-01-01
      • 2012-11-27
      • 1970-01-01
      相关资源
      最近更新 更多