2014-02-26 112 views
1

我嘗試了這個問題,如不同的解決方案:FLOT圖表:不工作在IE 8

  • Use a modified html5shiv. The html5shiv script adds the ability to add HTML5 tags into older versions of Internet Explorer.
<!--[if lt IE 9]> 
    <script src="dist/html5shiv.js"></script> 
<![endif]--> 
  • Use excanvas to provide a fallback to the
<!--[if lte IE 8]> 
     <script type="text/javascript" src="/Scripts/excanvas.min.js"></script> 
    <![endif]--> 

沒有什麼幫助。出現錯誤:

Canvas is not available. If you're using IE with a fall-back such as Excanvas, then there's either a mistake in your conditional include, or the page has no DOCTYPE and is rendering in Quirks Mode.

其他一些解決方案?


上面的所有腳本在包括flot.js之前都包含在內。

更改DOCTYPE也無濟於事。


源頁面的:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link rel="shortcut icon" href="/favicon.ico" /> 
    <!-- common styles & scripts --> 
    <link rel="stylesheet" type="text/css" href="/Content/css/custom-fonts.css?v=201306210000" /> 
    <link rel="stylesheet" type="text/css" href="/Content/css/styles.css?v=201306210000" /> 
    <script type="text/javascript" src="/Scripts/jquery.min.js"></script> 
    <script type="text/javascript" src="/Scripts/common.js?v=201306211714"></script> 
    <script type="text/javascript" src="/Scripts/control-custom-alert-scripts.js?v=201306211714"></script> 
    <!-- custom styles & scripts --> 

    <script type="text/javascript" src="/Scripts/jquery.tools.min.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.form.js"></script> 



    <script type="text/javascript" src="/Scripts/localization/en/JsMessages.js?v=201306210000"></script> 

    <script type="text/javascript" src="/Scripts/jquery.maskMoney.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.validate.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.validate.unobtrusive.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.ad-gallery.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.core.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.effects.core.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.effects.blind.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.widget.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.position.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.selectmenu.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.mouse.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.slider.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.datepicker.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.selecttime.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery-ui-timepicker-addon.js"></script> 

    <script type="text/javascript" src="/Scripts/jquery.number_format.js?v=201208031818"></script> 
    <script type="text/javascript" src="/Scripts/jquery.blockUI.js"></script> 

    <link rel="stylesheet" type="text/css" media="screen" href="/Content/css/jquery.tree/jquery.tree.css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="/Content/css/jquery.ad-gallery.css" /> 


    <!--[if lt IE 8]> 
    <style> 
     /*body {background:none}*/ 
     /* 
     #global-wrap .nav, #global-wrap .footer, #global-wrap .content-wrap, #global-wrap .user-nav{display:none} 
     #oldb-block {display:block; margin: 0 auto;} 
     */ 
    </style> 
    <![endif]--> 
    <!--[if IE]> 
     <script type="text/javascript" src="/Scripts/jquery.defaultText.js?v=201208031818"></script>   
    <![endif]--> 

    <!--[if lte IE 8]> 
     <script type="text/javascript" src="/Scripts/excanvas.min.js"></script>  
    <![endif]--!> 

    <!--[if IE 7]> 
     <link href="/Content/css/ie7styles.css" rel="stylesheet" type="text/css" media="screen" /> 
    <![endif]--> 
    <!--[if IE 8]> 
     <link href="/Content/css/ie8styles.css" rel="stylesheet" type="text/css" media="screen" /> 
    <![endif]--> 
    <!--[if IE 9]> 
     <link href="/Content/css/ie9styles.css" rel="stylesheet" type="text/css" media="screen" /> 
    <![endif]--> 
    <title> 

    Listing Stats 


    </title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <meta content="Viewed Listings Meta" /> 

    <meta name="keywords" content="commercial real estate marketing, commercial real estate professionals" /> 

    <link rel="stylesheet" type="text/css" href="/Content/css/styles-ui2.0.css?v=201310240000" /> 
    <script language="javascript" type="text/javascript" src="/Scripts/jquery.flot/jquery.flot.js"></script> 
    <script language="javascript" type="text/javascript" src="/Scripts/jquery.flot/jquery.flot.time.js"></script> 
    <script language="javascript" type="text/javascript" src="/Scripts/jquery.flot/jquery.flot.selection.js"></script> 
    <script language="javascript" type="text/javascript" src="/Scripts/control-chart-scripts.js"></script> 


    <!--[if IE]> 
     <script language="javascript" type="text/javascript"> 
      // Add Default Text to inputs 
      $(function() { 
       $.defaultText({ 
        css: 'default-text' 
       }); 
      });  
     </script> 
    <![endif]--> 

    <script language="javascript" type="text/javascript"> 
     function CustomError() { 
      $('div.validation-error').each(function() { 
       var error = $(this, 'span').text(); 
       if (error == '') 
        $(this).hide(); 
       else { 
        $(this).show(); 
       } 
      }); 
     } 

     $(function() { 
      CustomError(); 
      $('button').click(CustomError); 
     }); 

     $.ajaxSetup({ 
      // Disable caching of AJAX responses 
      cache: false 
     }); 

     var noAjaxBlock = false; 

     $(document) 
      .ajaxStart(function() { 
       if (!noAjaxBlock) { 
        startBlockUI(); 
       } else { 
        noAjaxBlock = false; 
       } 
      }) 
      .ajaxStop(function() { 
       if (!noAjaxBlock) { 
        $.unblockUI(); 
       } 
      }); 

    </script> 
</head> 
<body> 
... 
</body> 
</html> 
+2

您是否嘗試設置'DOCTYPE'? –

+0

@ twister0k這個我不試。它如何幫助我? – user3296938

+0

您收到的錯誤表示'...該頁面沒有DOCTYPE並且正在以怪癖模式呈現。「我想,這是有道理的。 –

回答

3

我就遇到了這個問題,有一天,this blog post救了我這些指示:

  1. Use the excanvas.js (or smaller excanvas.min.js) that is included from within the Flot repository. This one differs from others I believe and contains the necessary amendments to make it work

  2. Include the excanvas JavaScript file before you include the Flot JavaScript file(s).

確保工具 - >開發者工具 - >瀏覽器模式也設置爲「IE8」!

+0

嗯,我接受你的答案,但我的問題是在模擬IE8的IE8版本在原IE8中 - 一切都很好 – user3296938

+0

@ user3296938這就是爲什麼我要求使用真正的IE8而不是模擬模式。是問題(使用錯誤的DOCTYPE後)是在更新的IE上設置IE8模式。這可以防止[if lte IE 8]包含Excanvas(因爲IE版本大於8),但沒有畫布標籤(因爲您使用的是較舊的渲染模式)。 – DNS

+0

在我的情況下,它確實有效,但非常慢。 IE8花了幾分鐘才最終顯示圖表 – Atara