2

我在尝试将 img-tag 高度设置为 % 时发现了一些问题，特别是在 chrome 中的 td-tag 中...我希望 img-tag 高度与父元素相关（在这种情况下为 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高度，IE使用td-tag高度设置img-tag高度看起来不错。我哪里有问题？

4

0 回答 0