7

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

在 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 padding-top 和 padding-bottom，所以输入是 28px 高，而不是预期的 20px。

4

3 回答 3

7

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

于 2012-05-03T17:18:11.060 回答
2

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

于 2012-05-03T17:19:02.207 回答
2

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

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

行高不起作用

于 2012-05-03T17:35:48.907 回答