Question

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

怎么来的？在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>

我做错了什么？

Answer 1

原因是"<!DOCTYPE html>"第一个字符串。它必须设置为html 5上面的writter。如果它不存在或者它有html 4描述（＆＃34; PUBLIC等＆＃34;）则会发生此错误。

Answer 2

字体不同于Arial到Glyphicons（用于图标的字体），这会产生差异要解决此问题，您可以在 后面的按钮上添加一个空格（span），以获得预期的高度，或者您可以修复它以增加按钮的font-size

修改
您还可以增加line-height以通过添加任何内容来解决此问题

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

2 个答案: