html - 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 使它变得如此简单，如果您还没有在元素中使用该库，我建议为此目的添加它。