JQuery css() 行为

Question

为什么这两条指令不能产生相同的渲染？

$("#j_idt14\\:panelGrid label").css({
    "position": "absolute",
    "width": $("#j_idt14\\:panelGrid label").parent().outerWidth() - 
        parseInt($("#j_idt14\\:panelGrid label").css("padding-left")) - 
        parseInt($("#j_idt14\\:panelGrid label").css("padding-right")) -
        parseInt($("#j_idt14\\:panelGrid label").css("border-left-width")) -
        parseInt($("#j_idt14\\:panelGrid label").css("border-right-width")) -
        24 + "px"
});

和

$("#j_idt14\\:panelGrid label").css("position", "absolute");
$("#j_idt14\\:panelGrid label").css("width", 
    $("#j_idt14\\:panelGrid label").parent().outerWidth() - 
        parseInt($("#j_idt14\\:panelGrid label").css("padding-left")) - 
        parseInt($("#j_idt14\\:panelGrid label").css("padding-right")) -
        parseInt($("#j_idt14\\:panelGrid label").css("border-left-width")) -
        parseInt($("#j_idt14\\:panelGrid label").css("border-right-width")) -
        24 + "px");

在第一种情况下，宽度等于500px，在第二种情况下宽度等于394px(如预期)。

感谢您的澄清。

Answer 1

当位置不是绝对时，j_idt14\\:panelGrid label 元素将包含在父元素的 width 计算中。我的猜测是 j_idt14\\:panelGrid label 元素比父元素更宽。

当元素的位置设置为绝对时，计算时会忽略其宽度，因为它不再包含在父级的边界内。