javascript - chrome div 随机去高度 0px

Question

我在 chrome 中遇到了一个奇怪的错误(也发生在 chrome 中)但在 firefox 下没有。我正在编写代码以调整某些 div 的大小。

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

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

要尝试在此处放置一个断点:

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

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

Answer 1

问题似乎是，无论出于何种原因，它在移动时不喜欢混合单位(百分比和像素值)。查看this fiddle ，我更改了 $(".area").mousemove(function(event) 中的代码以使用百分比值，并在 $("*").mouseup(function(event) 方法，它似乎工作正常:

鼠标悬停:

$("*").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();
    }
});