Question

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

在我的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);
},

Answer 1

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

Chrome说.3 EM = 5px，其他浏览器说6px。这是你的填充，使高度更大，当你的填充在EM，你最终有不同的高度。

Chrome和其他浏览器之间的2px差异`outerHeight（）`

1 个答案: