Summernote按钮变化的高度

Question

我在Bootstrap模式中有一个Summernote WYSIWYG编辑器。它使用自定义工具栏。 （尽管使用默认工具栏仍会出现此问题）。

如下图所示，某些按钮的高度不同。通过颜色更改按钮旁边的下拉菜单特别明显。

我是否遗漏了强制按钮大小相同的文件或定义？

以下是我收录的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

Answer 1

您是否尝试更改html5 doctype？

http://getbootstrap.com/getting-started/#template

Answer 2

我有类似的问题。对我来说，我编写了一个影响所有div，span和p的通用CSS规则，这导致包含spans的某些按钮出错尺寸。因此，如果上一个答案对您不起作用，请检查您的样式是否存在违规规则。

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组，因为'fontsize'按钮和'paragraph'按钮位于该类别中。对于OP，它将是.note-textsize和.note-alignment