chrome div随机转到高度0px答案

【问题标题】：chrome div randomly go to height 0pxchrome div随机转到高度0px
【发布时间】：2014-10-04 08:02:26
【问题描述】：

我在 chrome 中遇到了一个奇怪的错误（也发生在 chromium 中），但在 Firefox 下没有。我正在编写一些代码，以便能够调整一些 div 的大小。

当我调整大小时，有时在 chrome 中，同级 div 显示为 0px 高度。比如在这个fiddle中，如果你拖动红色和蓝色div之间的调整线，绿色的div就会消失。

为了检查 div，我在 mousemove 处理程序的代码上放了一个断点，但 css 与正确显示的 div 完全相同。

要试一试，请在此处设置断点：

$("*").mouseup(function(event) {
    if (downV) {
        downV = false;

这是与 webkit 相关的错误还是我做错了什么？我该如何解决这个问题？

【问题讨论】：

为什么要把高度设为0px？我没有看到任何动画，尽管我浏览了它，为什么不直接使用 .hide() 并隐藏 div 而不是使其高度为 0px。此外，您的小提琴 js 无效，因为您在循环中创建了一个函数，因此它不会运行（点击顶部的 JSHint 按钮，它会显示代码中的错误位置（parent.prevAll().each(function () { upperSize += $(this).height(); });）和带有宽度的错误
代码运行起来更难 jsfiddle 指出了一个问题。转到 0px 的按钮是针对另一个与 chrome 相关的错误，但它来自 webkit (code.google.com/p/chromium/issues/detail?id=68004) 我已经编辑删除它
现在我明白了这个问题，这是一个奇怪的问题。如果你看看这个：stackoverflow.com/questions/17855401/… 它可能对你有帮助，回答的人似乎也发生了同样的事情。他修好了。看起来你的绿色盒子还在那里，是你的蓝色和红色盒子跳到容器的左侧。
可以通过检查器清楚地看到绿色框的高度为 0px，css 没有改变：/ 另外，如果您将黄色手柄移动到顶部，它并不总是这样做，或对机器人来说，它可能会“解决”问题。

标签： javascript jquery css google-chrome

【解决方案1】：

问题似乎在于，无论出于何种原因，它在移动时不喜欢混合单位（百分比和像素值）。查看this fiddle，我已将$(".area").mousemove(function(event) 中的代码更改为使用百分比值，并在$("*").mouseup(function(event) 方法中注释掉转换 px => %，它似乎可以正常工作：

鼠标：

$("*").mouseup(function(event) {
    if (downV) {
        downV = false;
        $("body").css("cursor","initial");
        //upchild.css("height", upchild.height()*100/sizeTot+"%");
        //downchild.css("height", downchild.height()*100/sizeTot+"%");
        event.stopPropagation();
    } else if (downH) {
        downH = false;
        $("body").css("cursor","initial");
        upchild.css("width", upchild.width()*100/sizeTot+"%");
        downchild.css("width", downchild.width()*100/sizeTot+"%");
        event.stopPropagation();
    }
});

鼠标移动：

$(".area").mousemove(function(event) {
    if (downV){
        var y = event.pageY - $(this).offset().top - upperSize;
        if (y < 0) {
            y = 0;
        }
        if (y > sizePart) {
            y = sizePart;
        }
        upchild.css("height", (Math.floor(y)+1)*100/sizeTot+"%");
        downchild.css("height", Math.floor(sizePart-y)*100/sizeTot+"%");
        event.preventDefault();
    } else if (downH) {
        var x = event.pageX - $(this).offset().left - upperSize;
        if (x < 0) {
            x = 0;
        }
        if (x > sizePart) {
            x = sizePart;
        }
        upchild.css("width", Math.floor(x)+1);
        downchild.css("width", Math.floor(sizePart-x));
        event.preventDefault();
    }
});

【讨论】：