ie下queryCommandState的问题

代码如下
情况是这样的
在ie下(刚开始时,变粗按纽是黄色的)
首先
  1.我把一段文字变粗.
  2.我用鼠标把选中的文字变粗.(变粗按纽会显示高亮色  蓝色)
  3.我取消选中,光标落在选中文字之间.(很奇怪为什么会变成黄色,但是我alert后却还是蓝色,ff下也是兰色)我希望的就是取消选中的时候  效果跟ff下一样.<!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> 
    <title>XXXXXXXXXX </title> 
<style type="text/css">
.a{
height:25px; width:25px; display:inline-table;  background-color:#FFFF00;
}
.b{
height:25px; width:25px; display:inline-table;  background-color: #00FFFF;
}
</style>
</head> 
<body> 
<span id="sss" class="a" onclick="ss()" unselectable = "on">B</span>
<IFRAME id="ss" height="200" src="about:blank" width="200" > </IFRAME> <script> 
var ed = null; 
var $ = function(id){ return document.getElementById(id)}; function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};window.onload = function(){ 
    ed = document.all?$('ss').contentWindow.document:$('ss').contentDocument; 
    ed.open(); 
    ed.write(' <html> <head> <style>html,body{margin:5px;font:14px;word-wrap:break-word} </style> </head> <body id="my_body"> </body> </html>'); 
    ed.close(); 
    ed.contentEditable = true; 
    ed.designMode = 'on'; 
//////////////////////////////////////////////////////////
addListener(ed,"click",active);
addListener(ed,"mouseup",active);
} function ss(){ 
    ed.execCommand("Bold",false,null);
active();
} function active(){
//alert('a'); //加了alert后似乎可以
$('sss').className=ed.queryCommandState("Bold")?"b":"a";
}</script> 
</body> 
<div> </div> 
</html>