Twitter bootstrap：带有图标且没有文字的按钮高度错误答案

【问题标题】：Twitter bootstrap: Wrong heigth of button with icon and without textTwitter bootstrap：带有图标且没有文字的按钮高度错误
【发布时间】：2014-06-05 00:58:09
【问题描述】：

带有 twitter-bootstrap 2/3 的简单 html 页面上有两个按钮：带和不带文本。如果我打开它，没有文字的按钮有错误的较小的高度（见下面的截图）。

这是怎么回事？ 同样的情况在 IE 9\10 中重复。但如果在jsfiddle 中运行，一切都很好。即使我通过开发人员工具栏在某些页面中手动添加一个按钮，在互联网上使用 TB 也一切正常。

P.S.：与 bootstrap 2 相同...

<html>
<head>
  <link rel="stylesheet" type="text/css" href="http//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<a class="btn btn-danger" href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a>
<a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-pencil"></span></a>
</body>
</html>

我做错了什么？

【问题讨论】：

如果您自己无法复制，我们将很难为您提供帮助。您自己的样式表中是否有任何样式，或者它只是引导程序？
这就是重点，除了 bootstrap 没有其他样式。
它不适用于我创建的所有文件，无论它是否包含 php/js 代码。如果我通过开发人员工具栏将 jsfiidle 页面剪切到我的示例中 - 一切正常，但如果创建新的 html 文件 - 它会失败..
同样的事情发生在“button”和“a”标签上。而且我找不到 jsfiddle/bootstap 官方页面和我的有什么区别
看来我找到了原因：它是 "" 第一个字符串。如果它不存在且有 html 4 描述（“PUBLIC 等”），则会发生此错误...

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

原因是"<!DOCTYPE html>" 第一个字符串。对于 html 5，它必须设置为上面的 Writer。如果它不存在或有 html 4 描述（“PUBLIC 等”），则会发生此错误。

【讨论】：

我遇到了这个问题，你的答案就是解决方案。

【解决方案2】：

字体从 Arial 到 Glyphicons（用于图标的字体）不同，这会导致差异。
要解决此问题，您可以在按钮的 span 之后添加一个空格 (&nbsp;) 以获得预期的高度，或者您可以通过增加按钮的 font-size 来修复它。

编辑：
你也可以增加line-height 来解决这个问题

【讨论】：

但是在 bootsrap 2 中，图标是图像而不是字体的原因是什么？
是的，Bootstrap 2 图标是恶意图像
尝试在不添加空格的情况下指定line-height.. 它应该可以工作
在 Bt2 中，按钮只有 3 种尺寸和行高帮助。但在 Bt3 中，按钮获取当前文本的大小，包括标题。所以你必须定义很多样式...