javascript - Firefox/Firebug 上像素的小数部分

Question

今天我偶然发现了一个简单的盒子样式如下:

div.menubox {
    background-color: #FFFFFF;
    border: 1px solid #887777;
    border-radius: 0 5px 5px 0;
    box-shadow: 1px 1px 3px #998888;
    font-family: Lato,sans serif;
    font-size: 12px;
    left: -5px;
    margin-bottom: 2em;
    min-height: 675px;
    overflow: hidden;
    padding: 25px 0 2em;
    position: absolute;
    top: 195px;
    transition-duration: 0.5s;
    transition-property: top;
    width: 215px;
    z-index: 99;
}

它包含一个ul和几个li。在我要求 Firebug 在控制台中打印菜单框高度之前，没有什么特别的。

console.log(document.getElementById("menubox").offsetHeight) 返回一个突出的 "677.2px"。

这是我第一次遇到这种奇怪的行为(我在旧的 Windows XP 安装上运行 firefox 17，带有 firebug 1.10.6，带有一堆插件)。

这是组件之一的已知问题还是新“功能”？

附录

删除 border-shadow、border-radius css 属性(通过 firebug 禁用)结果不会改变。

chrome 报告“649.5999755859375px”嗯……需要进一步调查
底层javascript代码

额外Ops，javascript 代码是填充变量的死行，真正的代码是console.log(document.id("menubox").getStyle("height))` 所以 mootools 1.4.5 是主要的疑点(在控制台上手动发出命令返回整数像素计数)两个浏览器。

问题仍然存在，但是，您是否遇到过类似的行为，是否有解决方法(除了手动舍入结果)？

Answer 1

像素上的小数部分在 CSS 中并不奇怪，因为它不是屏幕上的“点”，而是 Angular 测量值。

来自 CSS 2.1 文档:

"Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees.”

可在此处找到更多信息:http://inamidst.com/stuff/notes/csspx

我的猜测是您将 em:s 与 px:s 混合在一起，这将导致返回零散的像素值。请注意，这种行为没有任何问题，所以只要您没有遇到麻烦，我就不会在意。特别是因为您只在 DOM 元素上定义了一个最小高度。