如何给显示一个div：table-cell一个百分比高度？

Question

现在我正在玩纸牌游戏，现在我在写有关手牌的代码。
我们的目标应该像（这是我的代码在IE10中的结果）

有三个要求：
1.所有卡将填满手牌区域。
2.所有卡的宽度相同。
3.如果卡片太多，则右边的卡片将在左边的卡片上。 （带有蓝色边框的卡片最左边，低于第二张卡片）
因此，我们决定使用表来执行此操作。 这是代码。

<style>
    .hand {
        position: absolute; /* We need to locate it */
        display: table;
        width: 60%;
        height: 15%;
        left: 19.5%;
    }
        .hand .wrap {
            position: relative;
            display: table-cell;
            height: 100%;
        }
        .hand .card {
            position: relative;
            left: 50%;
        }
</style>
<div style="width: 400px; height:100px; position: relative"> 
<!-- Container's width and height will change with JavaScript -->
    <div class="hand">
        <div class="wrap">
            <img class="card" src=""/>
        </div>
        <div class="wrap">
            <img class="card" src=""/>
        </div>
        <!-- More cards can be added using JavaScript. -->
    </div>
</div>
<script>
    function adjust() { // Run this function when inserting new cards.
        $(".hand .card").css("margin-left", function () {
            return 0 - $(this).width() / 2 + "px";
        });
    }
</script>

现在，IE10中的代码结果如上所示， 但是在Firefox和Chrome中， .hand的高度与.card的图像高度相同。
我读过其他一些类似的问题，现在我知道表上的CSS height属性不起作用，并且我将将.card设置为position: absolute;的解决方案之一position: absolute; ，但仅适用于Chrome浏览器，在IE10中， .card的宽度和高度现在为0px，在Firefox中，它们都位于.hand的中心。
那么，是否有任何Cross-Browser解决方案来设置高度？
非常感谢！

Answer 1

您的实现无法正常工作，因为您无法将position应用于表格单元格（或行为像一个元素的元素）。 您需要一个额外的标记元素来允许这样做。

无需任何Javascript的工作示例应可在所有现代浏览器中使用： http : //jsfiddle.net/VN3wx/

CSS

#hand {
    display:table;
    width:550px;
    height:210px;
}
.card {
    display:table-cell;
}
.card > div {
    position:absolute;
}
.card img {
    height:210px;
    width:150px;
}

代码当然可以更简洁一些，但这只是出于说明目的；）