Question

我试图设置img-tag height以％为单位时遇到一些问题，特别是在chrome中的td-tag ...我希望img-tag height与父元素（在本例中为td-tag）相关。非常简化的代码示例如下所示：

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
    <table class="height-50">
        <tbody class="height-100">
            <tr>
                <td class="height-50">
                    <img class="height-30" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png" />
                </td>
            </tr>
            <tr>
                <td class="height-50">
                    <img class="height-30" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png" />
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CSS：

html, body
{
    height: 100%;
}        
table
{
    margin: 0 auto;
}        
td
{
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
}        
.height-100
{
    height: 100%;
}
.height-50
{
    height: 50%;
}
.height-30
{
    height: 30%;
}

看起来chrome根据图像高度设置img-tag高度但不设置父容器高度，使用td-tag height设置img-tag高度IE看起来不错。哪里有问题？

表格中的img高度百分比，当td高度也是百分比时，Chrome

0 个答案: