0

这是一个 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 中看到的那样，增加字段的高度（或降低字体大小）可以解决问题，但这对我来说不是一个可行的解决方案。

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

4

2 回答 2

0

最简单的解决方案是更改 .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 的文本通常在顶部和底部有几个像素作为“填充”，以使多行文本在行之间具有间距。结果，看起来文本适合，但实际上并不适合。

于 2013-07-22T18:04:31.550 回答
0

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

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

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

于 2013-07-22T17:05:36.673 回答