Question

自从我升级到最新的Chrome（38.0.2125.111米）后，我的输入字段中的光标似乎不再垂直对齐。它似乎拥抱了顶部但是一旦你开始输入东西，它就会到达中心。

我非常确定在旧版本的Chrome中，它曾经在中心垂直对齐，并且仍可在IE 10和Firefox（33.0.2）中正常使用

<input name="data1" id="data1" type="text" class="long-field" value="">

.long-field {
    float: left;
    width: 360px;
    height: 35px;
    line-height: 35px;
    padding: 0 0 0 5px;
    margin-bottom: 8px;
}

我还创建了一个jsfiddle - http://jsfiddle.net/cp2nctmh/

我尝试使用vertical-align css属性，但无法使其正常工作。非常感谢您的帮助。

Answer 1

将line-height: 35px更改为line-height: 1

使用line-height: 1您正在使用数字值（https://developer.mozilla.org/en-US/docs/Web/CSS/line-height）。我已多次阅读过数值是最适合使用行高的值。

如果我没有弄错，1等于font-size的高度。因此，如果更改字体大小，行高也会发生变化。

Answer 2

尝试删除line-height属性，它对我有用。

.long-field {
    float: left;
    width: 360px;
    height: 35px;
    padding: 0 0 0 5px;
    margin-bottom: 8px;
}

<input name="data1" id="data1" type="text" class="long-field" value="">

输入字段中的光标在Chrome中未垂直对齐

2 个答案: