→+extjs困惑在IE7下


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Loan Calculator</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=BIG5"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<style type="text/css">
.kk{
border:0.2cm groove pink;
}
.gui_title {
  background-color:#dfe8f6;
  font-family: arial,sans-serif,tahoma,verdana,arial;
  font-size:16px;
  height:22px;
  padding-top:4px;
  font-weight:bold;
  /*border-bottom:1px solid #99bbe8;
  margin-bottom:2px;*/
}
.bgg{
background-color:red;
}
</style>
<body>
<script>
document.write("<div class='gui_title'><table><tr><td>"+("成品出廠單")+"<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size=-1>訂單狀態:&nbsp;&nbsp;</td><td class = 'kk' id = 'mytd1'><font size=-1>新建</td><td>&rarr;</td><td class = 'none' id = 'mytd2'><font size=-1>待批准&#40;部門&#41;</td><td>&rarr;</td><td class = 'none' id = 'mytd5'><font size=-1>待批准&#40;管理層&#41;</td><td>&rarr;</td><td class = 'none' id = 'mytd3'><font size=-1>處理中</td><td>&rarr;</td><td class = 'none' id = 'mytd4'><font size=-1>已裝運</td></tr></table></div>");
</script>
</body>
</html>把下面的HTML放在\examples\panel下<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />    <!-- GC -->
  <!-- LIBS -->
  <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  <!-- ENDLIBS -->    <script type="text/javascript" src="../../ext-all.js"></script>    <style type="text/css">
    .x-panel-body p {
        margin:10px;
    }
    #container {
        padding:10px;
    }
.kk{
border:0.2cm groove pink;
}
.gui_title {
  background-color:#dfe8f6;
  font-family: arial,sans-serif,tahoma,verdana,arial;
  font-size:16px;
  height:22px;
  padding-top:4px;
  font-weight:bold;
  /*border-bottom:1px solid #99bbe8;
  margin-bottom:2px;*/
}
.bgg{
background-color:red;
}
    </style>
</head>
<body>
<script><!--
   var  bodyStyle = "background:#efeff3;";
var gui = new Ext.Viewport({
    layout:"border"
    ,style:bodyStyle
    ,items:[
      new Ext.Panel({
        id: "mainPanel"
        ,region:"center"
        ,layout:"fit"
        ,border: false
        ,split: true
        ,bodyStyle:bodyStyle
       })
    ,{ region: "south",border: false, minHeight:1,bodyStyle:bodyStyle,split: true,height:100, html:"rose1011111111111111111111111111111111111111111111111111101011111111111111111"}
    ,{ region: "east" ,border: false, minWidth:1, bodyStyle:bodyStyle,split: true,width:100, html:"john1011111111111111111111111111111111111111111111111111101011111111111111111"}
    ,{ region: "north",border: false, html:"<div class='gui_title'><table><tr><td>"+("成品出廠單")+"</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size=-1>訂單狀態:&nbsp;&nbsp;</td><td class = 'kk' id = 'mytd1'><font size=-1>新建</td><td>"+'&rarr;'+"</td><td class = 'none' id = 'mytd2'><font size=-1>待批准&#40;部門&#41;</td><td>'Vote &rarr;'</td><td class = 'none' id = 'mytd5'><font size=-1>待批准&#40;管理層&#41;</td><td>&rarr;</td><td class = 'none' id = 'mytd3'><font size=-1>處理中</td><td>&rarr;</td><td class = 'none' id = 'mytd4'><font size=-1>已裝運</td></tr></table></div>"}
   ]
});
</script>
</body>
</html>为什么&rarr;显示的不同呢？