Question

tl; dr - 问题是由顶部栏上的5px填充引起的。 @RyanKinal感谢您的注意！

这个问题正在处理我正在创作的用户脚本（与其他人分道扬..）

该脚本将用户列表从聊天中拉出来，并将其显示在页面顶部的一个漂亮的小型自动隐藏栏中。

完整的脚本很长，我不想污染页面 - 你可以看到它here

我的问题是，在某些情况下（我无法弄清楚它们是什么）新的顶部栏的高度计算不正确。

设置高度

var setHeight = function() {
    _top = -(topbar.height() - 15);
    topbar.css('top', (stuck ? 0 : _top));
};

和剧本的真正的肉和土豆。

    topbar.css({
        'position': 'fixed',
        'left': '0px',
        'z-index': '1',
        'width': '49%',
        'background-color': '#fff',
        'border-bottom': '2px solid #777',
        'box-shadow': '0px 5px 10px #777',
        'padding': '5px'
    });
topbar.append( $(document.getElementById('present-users')).detach() );
topbar.append( menu.detach() );
chat_body.append(topbar);
    setHeight();
    this.onresize = function() {
        if( !stuck ) {
            setHeight();
        }
    };
    this.onresize();

    topbar.hover(function() {
        if( !stuck ) {
            $(this).stop(true, true).animate({top:0}, 300, function() {
                checkHidden();
            });
        }

    }, function() {
        if( !stuck ) {
            $(this).stop(false, false).animate({top:_top}, 300);
            checkTop();
        }
    });

应该发生什么是顶栏从侧边栏拉出适用的容器 - 计算它们的高度 - 然后在元素上设置正确的“顶部”css规则。

我无法给你重现图像的步骤。（我认为它只发生在用户列表中有一个用户溢出时）

应该看 This is how it should look first load.

在某些情况下，这就是它的外观 This is how it actually looks first load.

脚本仍然会打开和关闭，但是“破坏”的最高值。 This is how it actually looks open

因此，一旦它被破坏，mouseout会将其恢复到那里的第二张图像。

更新

我已经确认只有当一个用户换行到新行时才会发生 - 重现的步骤：
1）安装脚本
2）打开chat.se或chat.so聊天室
3）为方便起见，使顶杆'棒'打开
4）调整浏览器窗口的大小，以便只有一个用户换行到新行 5）打开顶杆 6）刷新页面

Answer 1

<强>解决方案：

var setHeight = function() {
    _top = -(topbar.outerHeight() - 15);
    topbar.css('top', (stuck ? 0 : _top));
};

.outerHeight（）

描述：获取匹配元素集中第一个元素的当前计算高度，包括填充，边框和可选边距。返回值的整数（不带“px”）表示，如果在空元素集上调用，则返回null。

.height（）

请注意，在现代浏览器中，CSS height属性不包括填充，边框或边距。

未应用新高度的情况。我看不出来

1 个答案: