今天我偶然发现了一个简单的盒子,样式如下:
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 (手动发布控制台上的命令在两个浏览器上都返回一个整数像素数)。
但是,问题仍然存在,您是否遇到过类似的行为,是否有解决方法(除了手动舍入结果)?