Jquery 遮罩层为什么获取的高度=0

Question

<div id="mask">
    <div class="mask_box">
        <div class="mask_title">试卷预览</div>
        <div class="mask_con">
            这里是浮动层的内容
            <div class="operation">
                <a href="#" class="f_btn_a" id="mask_close">返回</a>
            </div>                                     
        </div>
    </div>  
</div>
CSS/** Mask ***/
#mask{
display:none;
background:#000;
position:absolute;
    filter:alpha(opacity=70);
    opacity:0.7;
z-index:999;
}
.mask_box{
border:#00A300 3px solid;
background:#FFF;
position:absolute;
/* top:50%;
left:50%;*/
top:0;
left:0;
color:#000;
padding:10px;
text-align:left;
line-height:20px;
width:700px;
min-height:400px; /*~{#(=b>v~}ie8.9.ff.chrome~{#)~}*/
*+min-height:400px;  /*~{#(=b>v~}ie7~{#)~}*/
_height:400px; /*~{#(=b>v~}ie6~{#)~} ie6~{3,3vWT6/Rg3v~}*/
    filter:alpha(opacity=100);
    opacity:1;
z-index:1000;
background-attachment:fixed;
}
Jquery
$(document).ready(function() {
// Mask
$("#btn_view").bind("click",function(items){
 
var mask_w_doc = $(document).width();
var mask_h_doc = $(document).height();
var mask_w_win = $(window).width();
var mask_h_win = $(window).height();
var mask_w;
var mask_h;

var mask_box_w = $(".mask_box").width();
var mask_box_h = $(".mask_box").height();

alert(mask_w_doc + "/" + mask_h_doc + "/" + mask_w_win + "/" + mask_h_win + "/" + mask_box_w +"/"+mask_box_h);

var margin_w = (mask_w_doc - mask_box_w)/2;
var margin_h = (mask_h_win - mask_box_h)/2;
alert(margin_h + "/" + mask_h_win);

if(mask_h_doc>mask_h_win){
mask_h = mask_h_doc;
}
else{
mask_h = mask_h_win;
}

$("#mask").css({
"display":"block",
"width":mask_w_doc ,
"height":mask_h
});

$(".mask_box").css({
"margin-left":margin_w ,
"margin-top":margin_h
});
});

$("#mask_close").click(function(){
$("#mask").hide();
});



});

Answer 1

.mask_box{
    border:#00A300 3px solid;
    background:#FFF;    
    position:absolute;
/*    top:50%;
    left:50%;*/
    top:0;
    left:0;
    color:#000;
    padding:10px;
    text-align:left;
    line-height:20px;
    width:700px;    
    min-height:400px; /*~{#(=b>v~}ie8.9.ff.chrome~{#)~}*/
    *+min-height:400px;  /*~{#(=b>v~}ie7~{#)~}*/
    _height:400px; /*~{#(=b>v~}ie6~{#)~} ie6~{3,3vWT6/Rg3v~}*/    _height样式写错了
    filter:alpha(opacity=100);
    opacity:1;
    z-index:1000;
    background-attachment:fixed;
}

Answer 2

问题解决了，主要还是思路错了[我将遮罩内容层放在遮罩层内，构成父子关系]。遮罩层和遮罩内容层，必须是同级兄弟。不可以遮罩层为父，遮罩内容层为子。
理由
1.jquery对于定位后的元素，获取其高度值均为0。无法获取高度，则无法实现水平垂直方向均居中。
2.因为遮罩层设了透明度，这样则遮罩内容层作为它的子元素，继承了透明度，这是我们不想的。

Answer 3

哦，我是直接在你的样式里面加了句height:400px测试后是没问题的,兼容性的问题我不太懂。
1、LZ下面说"jquery对于定位后的元素，获取其高度值均为0",这句话是不对的。
LZ上面的样式是考虑到兼容性问题，但是你那样的设置估计jquery是没考虑的，$("#").height()估计只会正确的获取样式中设置了height的元素高度。
2、弹出层一般跟遮罩层是同级的，不过LZ你这么写也没有问题，子元素虽然继承了父容器的一些属性,但是必要的时候自己可以重写这些属性的。