如何给显示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;，但它只能起作用在Chrome中，在IE10中.card现在的宽度和高度为0px，在Firefox中它们都位于.hand的中心。
那么是否有任何跨浏览器解决方案来设置高度或任何其他方式来做到这一点？ 非常感谢！

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;
}

代码当然可以更加清晰，但它仅用于说明目的;）