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

我正在研究这个自定义选择菜单，这是我正在开发的一个表单插件的一部分。2px在Chrome浏览器和其他浏览器之间的`outerHeight（）`

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

来源

2012-05-02 elclanrs

这是因为EM基于浏览器。除此之外，没有办法解决这个问题。

Chrome说.3 EM = 5px，其他浏览器说6px。这是你的填充物，使高度更大，并且当你的填充物在EM中时，你会得到不同的高度。

来源

2012-05-02 03:33:11 DanRedux

是的，它必须是这样的。但为什么Chrome只报告25px和所有其他27？ Chrome是唯一一个给我我想要的价值的人。没有在px中设置任何其他方式？ – elclanrs

是的。你必须以任何规模的方式进行编码。尝试放大，在Chrome中，EM应该改变（可能不会，但仍然）。 EM是针对特定浏览器的，可以是不同的，所以只要拿它给你。一旦你有了价值，你在做什么？ – DanRedux

我正在计算'scrollToItem（）'。见编辑... – elclanrs

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

回答

相关问题