Summernote按钮高度不同

Question

我在Bootstrap模态框内使用了Summernote所提供的所见即所得编辑器，它使用了自定义的工具栏。（不过，即使使用默认的工具栏，这个问题仍然存在）

如下图所示，你可以看到一些按钮高度大小不同。特别是在颜色更改按钮旁边的下拉菜单中，这种情况格外明显。

我是否缺少某个文件或定义，以便强制按钮具有相同的大小？

这里是我包含的CSS文件：

<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../css/theme.css" rel="stylesheet">
<link href="../css/summernote.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

这里是JavaScript代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="../js/bootstrap.min.js"></script> 
<script src="../assets/js/docs.min.js"></script> 
<script src="../scripts/summernote.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(e){
    $('#news_editor').summernote({height:150,toolbar:[
    ['style',['bold','italic','underline','clear']],
    ['fontface',['fontname']],
    ['textsize',['fontsize']],
    ['fontclr',['color']],
    ['alignment',['ul','ol','paragraph']],
    ['insert',['link','picture','table']],
    ['adv',['codeview']]
    ]});
});
...

以下是整个HTML文件： http://pastebin.com/G3Heae8J

（注意：本段翻译中加入了句子结构调整，但并未改变原意）

- Will

Answer 1

你会尝试更改HTML5文档类型吗？ http://getbootstrap.com/getting-started/#template

- Hacker Wins

---

谢谢，那个方法有效。不幸的是，它没有修复我另一个希望同时得到解决的错误。 发生的错误是这样的：http://imgur.com/d44v2GX，但既然你回答了我的问题，我仍然会把你标记为正确的。谢谢。 - Will

Answer 2

我遇到了类似的问题。对我来说，我编写了一条通用的CSS规则，影响所有的

、和

元素，这导致一些包含的按钮大小不正确。所以如果之前的答案对你没有用，检查你的样式表是否有冲突的规则。

- user3413723

Answer 3

我遇到了同样的问题。我不完全确定原因，但我认为它与默认的Bootstrap CSS有关，我将其与Summernote CSS和其他在我的应用程序中使用的CSS一起编译。

问题的根源是下拉按钮的行高太大。

我的解决方案是使用自定义CSS进行覆盖，如下所示，强制新的行高适合其余底部。

.note-toolbar .note-fontsize .note-btn-group button,
.note-toolbar .note-para .note-btn-group button {
    line-height: 12px !important;
}

请注意，我只强制应用了 .note-fontsize 和 .note-para 这两个组别，因为它们是“字体大小”按钮和“段落”按钮所在的类别。对于 OP 来说，应该是 .note-textsize 和 .note-alignment。

- Wang Peter