2

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

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。在我要求萤火虫在控制台中打印菜单框高度之前，没什么特别的。

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

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

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

附录

删除边框阴影，边框半径 css 属性（通过萤火虫禁用）结果不会改变。

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

EXTRA Ops，javascript代码是填充变量的死线，真正的代码是console.log(document.id("menubox").getStyle("height))`所以主要怀疑mootools 1.4.5 （手动发布控制台上的命令在两个浏览器上都返回一个整数像素数）。

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

4

1 回答 1

0

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

来自 CSS 2.1 文档：

“像素单位与查看设备的分辨率有关，即最常见的是计算机显示器。如果输出设备的像素密度与典型计算机显示器的像素密度有很大不同，用户代理应该重新调整像素值。它是推荐参考像素为像素密度为96dpi、距离阅读器一臂远的设备上一个像素的视角，对于标称臂长28英寸的设备，可视角度约为0.0213度。 ”</p>

更多信息可以在这里找到：http: //inamidst.com/stuff/notes/csspx

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

于 2012-11-25T10:33:38.127 回答