Question

我正在尝试使输入看起来像纯文本。目的是绘制一个跨度，当用户点击它隐藏的跨度并显示一个看似纯文本但可由用户编辑的输入。

在Chrome和Firefox中，我无法摆脱顶部和底部填充，即使我将填充和边距CSS属性设置为0。

我的CSS看起来像这样：

input.myInput {
    font-family: "segoe ui";
    font-size: 20px;
    padding: 0px;
    margin: 0px;
    outline: none;
    border: 0px;
    vertical-align: baseline;
}

请参阅字体大小设置为20px。 Chrome和Firefox添加4px填充顶部和填充底部，因此输入高28px，而不是预期的20px。

Answer 1

您还需要将input元素的line-height重置为20px。默认情况下，某些浏览器将4px（2个顶部+ 2个底部）添加到输入元素的行高。

Answer 2

它可能是你的字体。尝试直接设置输入的CSS高度或尝试调整行高。

Answer 3

正如Diodeus建议的那样，只需为输入添加高度。

input.myInput {
    font-family: "segoe ui";
    font-size: 20px;
    height: 20px;
    padding: 0px;
    margin: 0px;
    outline: none;
    border: 0px;
    vertical-align: baseline;
}

行高不起作用

删除Chrome / Firefox中文本输入中的顶部和底部填充

3 个答案: