0

我正在开发这个自定义选择菜单，它是我正在开发的表单插件的一部分。

在我的CSS中，我有这样的东西：

.qval-select span {
    font-size: 15px;
    display: block;
    padding: .3em .8em;
    cursor: pointer;
}

这span是自定义选择菜单中的一个项目。

在某些时候，我需要知道该项目outerHeight()并进行一些计算。我遇到的问题是 Chrome 报告的高度25px和所有其他浏览器（IE8、IE9、Firefox）报告的高度27px。有趣的是，似乎只有 Chrome 才能获得我正在寻找的号码。

为了明白我的意思，我在这里上传了一个例子：

http://spacirdesigns.com/idealforms/。

当您打开自定义选择菜单并使用向上和向下箭头滚动时，问题就很明显了。正如你所看到的，除了 Chrome 之外的所有浏览器都会额外计算 2 个像素并搞砸整个事情。
如果您打开控制台，您可以看到高度日志并与其他浏览器进行比较。

px如果我为一切设置一个高度，span一切正常，但拥有自定义选择的美妙之处在于能够使其适应多种尺寸，所以我需要em. 我也尝试设置字体em并更改字体，但没有。

有人可以告诉我这里发生了什么，为什么？它快把我逼疯了。 

scrollToItem: function() {
    // Select.sub.scrollTop(0);
    var idx = Select.items.find('.selected').parent().index(),
        height = Select.items.outerHeight(),
        items = Select.items.length,
        allHeight = height * items,
        curHeight = height * (items - idx);
    console.log(height);
    Select.sub.scrollTop(allHeight - curHeight);
},
4

1 回答 1

3

这是因为 EM 是基于浏览器的。没有办法解决这个问题，除非以某种方式解释这些变化。

Chrome 说 0.3 EM = 5px，其他浏览器说 6px。使高度变大的是您的填充，并且当您的填充在 EM 中时，您最终会得到不同的高度。

于 2012-05-02T03:33:11.527 回答