Firefox - HTML 文本输入中的可滚动文本

Question

这是一个 jsFiddle，演示了我的情况：http://jsfiddle.net/SFrbZ/4/

基本上，我希望在表格单元格中有输入字段，并将输入设置为固定的高度和字体大小。现在发生的情况是用户可以将鼠标悬停在输入上或单击输入，并且使用鼠标滚轮可以向上滚动文本并部分超出框架。突出显示文本还允许您将其向上移动。下面的代码也显示了这个问题的基本情况：

HTML：

<input class="scroll" type="text" value="1"></input>

CSS：

.scroll {
display: table-cell;
width: 38px;
height: 8px;
font-size: 11px;
color: Black;
font-family: Calibri;
text-align: center;
background-color: rgb(182, 231, 201);
}

奇怪的是，这只发生在 Firefox 上，而不是 Chrome、IE 或 Safari。正如您在 jsFiddle 中看到的那样，增加字段的高度（或降低字体大小）可以解决问题，但这对我来说不是一个可行的解决方案。

我尝试了许多更改以试图修复它，但都失败了。与溢出、行高、填充、边距、显示类型等混淆，似乎没有任何作用。任何指针或建议将不胜感激！

Answer 1

您最好的选择可能是在 .scroll 类的元素上安装滚动事件的 Javascript 处理程序，它只会吞下事件并返回 false ——这将阻止元素以任何方式滚动，这应该可以解决如所述的问题。 This fiddle，使用jQuery演示解决方案，内容如下：

$(document).ready(function() {
    $('.scroll').scroll(function(e) {
        e.preventDefault();
        return false;
    });
});

没有 jQuery，通过window.addEventListener &c. 的解决方案仍然是可行的，但是 jQuery 使它变得如此简单，如果你还没有在你的项目中使用该库，我建议添加它只是为了这个目的。

Answer 2

最简单的解决方案是更改 .scroll css 类的 line-height 属性以匹配高度。以你为例：

.scroll {
  display: table-cell;
  width: 38px;
  height: 8px;

  line-height: 8px;

  font-size: 11px;
  color: Black;
  font-family: Calibri;
  text-align: center;
  background-color: rgb(182, 231, 201);
}

问题在于该文本在技术上不适合该框。高度为 11px 的文本通常在顶部和底部有几个像素作为“填充”，以使多行文本在行之间具有间距。结果，看起来文本适合，但实际上并不适合。