2

我有一个带有 Bootstrap 3 的搜索表单，它在 Chrome 和 Firefox 中看起来和工作得很好，但是其中两个角落在 Internet Explorer 中的行为很奇怪，我不知道为什么。我基本上将输入按钮显示为好像它在搜索表单内，但实际上搜索表单没有右边框，输入按钮没有左边框，所以看起来它们是一体的。

出于某种奇怪的原因，我无法弄清楚，在 IE 中，它在右侧有两个圆角和一些未完成的直角，如下所示：

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 中，所以它必须在这段代码中的某个地方:(

4

0 回答 0