输入行高度使输入在IE上可滚动

Question

当我在line-height字段上设置input值时，我注意到这种奇怪的行为。您可以see it here尝试在input字段中写入一些文本，然后单击并按住鼠标按钮并上下移动鼠标：input滚动显示空间line-height。有没有解决方法呢？

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

<input type="text">

Answer 1

滚动显示是因为填充+字体大小值低于line-height使用的

;

行高：2;具有更高的值，因此它显示在输入文本内部，并在焦点时给出滚动效果。

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

例如，如果您的font-size为14px，请尝试将行高设置为

14px + 5px填充顶部+ 5px填充底部，等于24px。

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

Answer 2

我会为输入框的垂直高度添加额外的高度值： height: 2em;