我写了一个flexbar css风格的appbar,但是webkit上的中文模式布局有点怪异。
突出绿色背景颜色的地方是flexbox div。
.green-background-color-div`
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
background-color: green;
`;
并且文本是textField的占位符,即此textField的css。
.textField`
width: 100%;
height: 100%;
padding: 0;
margin: 0;
caret-color: gray;
font-size: 18px;
border: none;
outline: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: transparent;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
&::-webkit-search-cancel-button {
display: none;
}
`;
普通文本没有问题。
如何调整我的代码以像Chrome一样将中文设为中心?
在CSS中使用行高
.textField{
line-height:26px;
}
26px是一个假设。您可以根据您的设计增加。