窗体在IE兼容模式下掉出div

我有一个div（带边框）。这在Firefox和IE 10上看起来不错（不确定旧版IE）。但是，有时IE会激活兼容模式，然后窗体（输入框和提交按钮）不在div中。是否有一些CSS来防止这种情况？窗体在IE兼容模式下掉出div

我的HTML：

<!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>test</title> 
    </head> 

    <body> 
    <div class="box"> 
     <h2 style="display:inline;">Some sample text</h2> 

     <form id="frm"> 
     <input type="text" id="tb" /> 
     <input type="submit" class="button" /> 
     </form> 
    </div> 
    </body> 
    </html>

和我的CSS在的jsfiddle

.box { 
    display:block; 
    height:40px; 
    magin-left:5px; 
    padding:5px 0 0 10px; 
    width:740px; 
    background:green; 
    border:1px solid black; 
} 
h2 { 
    margin:0 0 7px; 
    padding:0; 
    font:1.6em Arial; 
    letter-spacing: -1px 
} 
#tb { 
    width:225px 
} 
.button { 
    float:right; 
    width:93px; 
    margin-left:5px; 
    padding:2px 0 
} 
form { 
    float:right; 
} 
#frm { 
    margin-right:10px; 
    margin-top:2px; 
    width:330px; 
}

活生生的例子： http://jsfiddle.net/d3EdW/1/

截图： screenshot