Twitter bootstrap：输入附加图标的按钮 - 附加溢出超过输入的按钮

Question

我无法清除标题（随意编辑）。

所以，我已经包含了一个图像来显示问题。

请参阅Google button与input处于同一级别，但search button正在溢出。

仅当icon-search放在button内时才会出现错误。如果我用文本替换图标，它可以解决问题。它与font-size : 17.5px的{​​{1}}有关，当我将其更改为.btn-large时，它可以正常工作。我可以破解它，但我想要一个有效的方法。

Demo

标记：

---

font-size:16.5px

CSS

---

<form class="input-prepend input-append">
    <div class="btn-group"> <span class="btn btn-large dropdown-toggle" data-toggle="dropdown">Google <span class="caret"></span></span>
        <ul
        class="dropdown-menu">
            <li><a href="#">a</a>
            </li>
            <li><a href="#">b</a>
            </li>
            </ul>
    </div>
    <input type="text" class="input-xlarge" placeholder="Search">
    <button class="btn btn-large" type="submit"> <span class="icon icon-search"></span>

    </button>
</form>

修改

遇到问题，

Chrome版本24.0.1312.57 Firefox 18.0.1 歌剧12.14 （全部在Ubuntu 12.04中运行）

Answer 1

Bootstrap图标更常用于<i>标记。

<i class="icon-search"></i>

但是，我并不是说这会解决这个问题。这可能是特定于浏览器的问题。我知道IE使用input-append时遇到了问题，但这不是浏览器特定的样式表无法解决的问题。

.input-append { height:19px; }
.input-append i { margin:0; padding:0; }

修改：这似乎不是Chrome上的问题。至少不适用于Bootstrap网站上的examples given。

Answer 2

http://jsfiddle.net/chne9/1/

.btn-large [class^="icon-"], .btn-large [class*=" icon-"] {
    vertical-align:top;    
}

默认设置为text-top - 尝试设置top（编辑选择器以适应有问题的按钮 - 只是为了确保不破坏任何其他引导程序功能）。