Jquery 不同高度的Summernote按钮

我有一个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']]
    ]});
});
...

$（文档）.ready（函数（e）{
$（“#新闻编辑”）。summernote（{高度：150，工具栏：[
['style'、['bold'、'italic'、'underline'、'clear']，
['fontface'，['fontname']]，
['textsize'，['fontsize']]，
['fontclr'，['color']]，
[‘对齐’、[‘ul’、‘ol’、‘段落’]，
[‘插入’、[‘链接’、‘图片’、‘表格’]，
['adv'，['codeview']]
]});
});
...

---

这是整个HTML文件：

您是否尝试更改html5 doctype

---

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

div

s、

span

s和

p

s，这导致一些包含

span

的按钮大小错误。因此，如果前面的答案不适合你，请检查你的风格是否违反规则。

我也遇到了同样的问题。我不完全确定原因，但我认为这与默认引导CSS有关，我与summernote CSS和我应用程序中使用的其他CSS一起编译

问题的根源在于下拉按钮的行高度太大

我的解决方案是使用如下自定义CSS覆盖，以强制新的线条高度适合底部的其余部分

---

注：我只强制使用.note fontsize和.note para组，因为“fontsize”按钮和“段落”按钮位于类别中。对于OP，它将是.note textsize和.note alignment

谢谢，这很有效。不幸的是，它没有修复我的另一个错误，我希望能在同一时间得到修复。出现的错误是：，但既然你回答了我的问题，我仍然会认为你是正确的。谢谢

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