Question

我一直在与Table-Layout斗争，现在我尝试在我的应用程序中实现课程 - 据说“简单的渲染练习”仍然毁了我的一天：（（

下面的 screenshot 屏幕截图稍微说明了问题：2行的固定高度为20px，但由于第5列太高，IE将所有行中的必要“填充”分开，而FF尊重指定行高，仅扩展最后一行w / oa height-spec。（在我的实际情况中，FF渲染也不正确并放大了固定高度的行）。

所以我想知道是否有一个安全的（跨浏览器）解决方案来修复这个???

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
</head>
<body>
    <table border="1" cellspacing="2" cellpadding="2">
    <tbody>
        <tr style="height:20px;"><td style="height:20px;">1a</td><td>1/2</td><td>1/3</td><td>1/4</td>
        <td rowspan="4" style="height: 300px;">the <span style="background-color: yellow">supacell</span> just contains a lot of text and other info, variable height etc.</td></tr>
        <tr><td height="20">bla2</td><td><input type="text" /></td><td>2/3</td><td>2/4</td></tr>
        <tr><td height="20">bla3</td><td>3/2</td><td>3/3</td><td><textarea cols="20" rows="4">bla</textarea></td></tr>
        <tr><td colspan="4">no height</td></tr>
        </tbody>
    </table>
</body>
</html>

Answer 1

尝试设置line-height属性而不是高度属性，您看到的额外填充/边距是行高计算的结果，通过定义它您将能够修复它并在浏览器之间保持不变。

IE和FF“意外地”呈现我的表格

1 个答案: