Twitter引导：只有输入附加图标内的图标溢出输入

我不能将标题清除（随意编辑它）。Twitter引导：只有输入附加图标内的图标溢出输入

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

查看Google button和input在同一水平，但search button溢出。只有当我把刚才的icon-search内button发生

See the search button overflowing

错误。如果我用文字替换图标，它可以解决问题。它与font-size : 17.5px的.btn-large有关，当我将其更改为font-size:16.5px时，它有效。我可以破解它，但我想要一个有效的方法。

标记：

<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>

CSS

form .input-xlarge { 
    padding: 11px 19px; 
    /* equal to btn-large */ 
}

编辑：

体验问题，

的Chrome版本24.0.1312.57 火狐18.0.1 歌剧12.14 （在Ubuntu 12.04所有正在运行）

来源

2013-02-15 Jashwant

在哪个浏览器中？ – easwee 2013-02-15 08:54:02

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

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

默认情况下此设置为text-top - 尝试设置只是为了top（编辑选择适合刚刚有问题的按钮 - 只是为了确保你不破坏任何其他引导功能）。

来源

2013-02-15 08:58:52 easwee

看起来像一个很好的解决方案。它不是一个错误呢？ – Jashwant 2013-02-15 09:00:24

@Jashwant - 真的不知道他们为什么使用'文本顶部' - 将不得不为此深入研究，但现在没时间了:) – easwee 2013-02-15 09:01:53

可能是因为图标通常伴随着按钮内的文本。您的解决方案看起来不错，并解决了问题。 – Jashwant 2013-02-15 09:05:19

引导图标都是比较常用的与<i>标签。

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

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

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

编辑︰这似乎不是在Chrome上的问题。至少不是Bootstrap站点上的examples given。

来源

2013-02-15 08:55:45

我过去曾问过一个很好的问题，关于''标签。看看[这里]（http://stackoverflow.com/questions/11135261/i-tag-for-icons）我有问题在铬/ ff和歌剧。 – Jashwant 2013-02-15 08:59:28

+0

它与'i'无关，因为图标选择器在CSS中是'[class^=“icon - ”]'而不是'i'。“我”只是因为它很短，我猜是因为图标从i开始 - 使用跨度更加语义化，因为它是一个中性元素。 – easwee 2013-02-15 09:04:26

+0

啊，那里有一个很好的问题！我无法想象这里的''标签可以解决您的问题，正如我所提到的那样，但是Bootstrap通过''使用它，所以默认跨度样式可能会导致此问题。我在Chrome中进行了测试，无法复制该问题，但在IE中我曾看到过这一点。我认为你最好的选择是创建一个特定于浏览器的样式表来处理它。我已经在5个或6个站点中使用Bootstrap，并且我必须在IE中添加一些调整（特别是7个）。 – 2013-02-15 09:05:40

Twitter引导：只有输入附加图标内的图标溢出输入

回答

相关问题