搜索表单（Bootstrap 3）在IE中表现奇怪

Question

我有一个带有Bootstrap 3的搜索表单，它在Chrome和Firefox中看起来非常完美，但是其中两个角落在Internet Explorer中表现得很奇怪，我无法弄清楚原因。我基本上把输入按钮显示为好像它在搜索表单中，但实际上搜索表单没有右边框，输入按钮没有左边框，所以它看起来像是一块。

由于一些奇怪的原因，我无法弄清楚，在IE中，它有圆角和右侧的一些未完成的直角，看起来像这样：

这是我的HTML代码：

<form class="form-inline topsearchform" role="form">

<div class="input-group">
<input class="form-control searchformradius" type="text" placeholder="Search products...">
<span class="input-group-btn">
<button class="btn btn-default searchformbutton" type="button"><i class="icon-search     searchicon"></i></button>
</span>
</div>

</form>

CSS：

.searchformbutton{
border-radius: 6px;
border: 1px solid #CCCCCC;
border-left:0px solid #CCCCCC;
height:34px;
}
.searchformbutton:active{
border-radius: 6px;
border: 1px solid #CCCCCC;
border-left:0px solid #CCCCCC;
height:34px;    
box-shadow:none;
background: #FFFFFF;

}
.searchformbutton:hover{
border-radius: 6px;
border: 1px solid #CCCCCC;
border-left:0px solid #CCCCCC;
height:34px;    
box-shadow:none;
background: #FFFFFF;
}
.searchformbutton:focus{
border-radius: 6px;
border: 1px solid #CCCCCC;
border-left:0px solid #CCCCCC;
height:34px;    
box-shadow:none;
background: #FFFFFF;
}
.form-inline.topsearchform{
width:300px;
}

这是一个jsFiddle：http://jsfiddle.net/dpLgc/

任何帮助，为什么它在IE中看起来像这将非常感谢。请注意默认的Bootstrap 3代码，它看起来像在IE中，因此它必须在此代码中的某处:(