输入行高使输入在 IE 上可滚动答案

【问题标题】：input line height makes input scrollable on IE输入行高使输入在 IE 上可滚动
【发布时间】：2015-06-26 07:34:14
【问题描述】：

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

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

&lt;input type="text"&gt;

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

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

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

【讨论】：