android - Onsen UI 工具栏标题和图标在物理设备中未垂直对齐

Question

我正在使用 onsen ui 构建一个 phonegap 移动应用程序。工具栏行高设置为工具栏的大小，以便内部元素垂直居中，文本对齐居中。它在浏览器中运行良好，但在物理设备上运行不佳。CSS

.navigation-bar {
font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 300;
font-size: 14px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
white-space: nowrap;
overflow: hidden;
word-spacing: 0;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
background: transparent;
border: none;
line-height: normal;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 2;
display: block;
height: 44px;
padding-left: 0;
padding-right: 0;
background: rgba(56,56,56,0.97);
color: #dbd8d8;
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: 1px solid #ddd;
font-weight: 400;
width: 100%;
white-space: nowrap;
overflow: visible;
border-bottom: none;
}

ons-toolbar ~ .page__content {
top: 44px;
}

.navigation-bar__left {
max-width: 44%;
width: 27%;
text-align: left;
height: 100%;
line-height: 44px;

}

.navigation-bar__title {
height: 100%;
line-height: 44px;
font-weight: bold;
color: #dbd8d8;
margin: 0;
padding: 0;
overflow: visible;
}

.navigation-bar__right {
max-width: 50%;
width: 27%;
text-align: right;
height: 100%;
line-height: 50px;
}

这是应用程序在物理设备中的屏幕截图。

Answer 1

该问题仅针对运行 Lollipop 的 LG G2。在另外两台设备上测试，工作正常。