html - 输入行高使输入在 IE 上可滚动

Question

当我在 input 字段上设置 line-height 值时，我在 IE 上注意到了这种奇怪的行为。你可以see it here , 尝试在 input 字段中写入一些文本，然后在其上单击并按住鼠标按钮并上下移动鼠标:input 滚动行高。有什么解决方法吗？

    input {
      padding-top: 5px;
      padding-bottom: 5px;
      line-height: 2;
    }

<input type="text">

Answer 1

出现滚动是因为 padding + font-size 值低于 line-height;

行高:2；具有更高的值，因此它显示在输入文本内部，并在聚焦时提供滚动效果。

您可以尝试根据您的输入文本字体大小来计算它，并设置一个以像素为单位的行高值，以便拥有一个绝对行高而不是相对行高。

例如，如果您的font-size 是 14px，请尝试将 line-height 设置为

14px + 5px padding top + 5px padding-bottom 等于 24px。

看看将其设置为 24px 是否可以解决您的问题。