Question

我遇到了铬中的一个奇怪的错误（也发生在铬中），但不是在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)中的代码以使用百分比值，并注明了转化次数px =＆gt; $("*").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();
    }
});

chrome div随机进入高度0px

1 个答案:

鼠标松开：

鼠标移动：