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＆amp; 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的文本通常在顶部和底部有几个像素作为填充＆＃39;使它成为多行文本在行之间有间距。结果，文本似乎适合，但实际上并非如此。

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

2 个答案: