diff --git a/test/boxplot.html b/test/boxplot.html
index 3e0e9770a8dcd9ac5b367e363b9b7585532b47b2..ac27b86341520e9987700c8828e8885bda2892bb 100644
--- a/test/boxplot.html
+++ b/test/boxplot.html
@@ -2,16 +2,17 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="reset.css"/>
         <script src="esl.js"></script>
         <script src="config.js"></script>
         <script src="lib/facePrint.js"></script>
-        <script src="lib/dat.gui.min.js"></script>
     </head>
     <body>
         <style>
-            html, body, #main {
-                width: 100%;
-                height: 100%;
+            #main {
+                width: 900px;
+                height: 650px;
+                border: 9px solid #eee;
             }
         </style>
         <div id="info"></div>
@@ -30,6 +31,7 @@
                 'echarts',
                 'data/Michelson-Morley.json',
                 'extension/dataTool/prepareBoxplotData',
+                'zrender/core/env',
                 'echarts/chart/boxplot',
                 'echarts/chart/scatter',
                 'echarts/component/title',
@@ -39,7 +41,7 @@
                 'echarts/component/grid',
                 'echarts/component/tooltip',
                 'zrender/vml/vml'
-            ], function (echarts, rawData, prepareBoxplotData) {
+            ], function (echarts, rawData, prepareBoxplotData, env) {
 
                 chart = echarts.init(document.getElementById('main'), null, {
                     renderer: 'canvas'
@@ -48,6 +50,8 @@
                 update('horizontal');
                 // update('vertical');
 
+                initControlPanel(env);
+
                 function update(layout) {
 
                     data = prepareBoxplotData(rawData, {
@@ -82,7 +86,7 @@
                         title: [
                             {
                                 text: 'Michelson-Morley Experiment',
-                                left: 'center',
+                                left: 'center'
                             },
                             {
                                 text: 'upper: Q3 + 1.5 * IRQ \nlower: Q1 - 1.5 * IRQ',
@@ -224,13 +228,23 @@
                 };
 
 
-                var gui = new dat.GUI();
-                var config = {
-                    layout: 'horizontal'
-                };
-                gui
-                    .add(config, 'layout', ['horizontal', 'vertical'])
-                    .onChange(update);
+                function initControlPanel(env) {
+                    if (!env.browser.ie || env.browser.ie.version > 8) {
+
+                        var scr = document.createElement('script');
+                        scr.src = 'lib/dat.gui.min.js';
+                        scr.onload = function () {
+                            var gui = new dat.GUI();
+                            var config = {
+                                layout: 'horizontal'
+                            };
+                            gui
+                                .add(config, 'layout', ['horizontal', 'vertical'])
+                                .onChange(update);
+                        };
+                        document.head.appendChild(scr);
+                    }
+                }
             });
 
         </script>
