IE和FF呈现我的表“意外” [英] IE and FF render my table "unexpectedly"
问题描述
我一直在与表格布局，现在我试图在我的应用程序实现的经验教训 - 据说简单的渲染练习仍然毁了我的一天：（（
I've been struggling with Table-Layout and now I tried to implement the lessons in my application - and that supposedly "simple rendering exercise" still ruins my day :((
下面的屏幕截图说明了一点：2行有固定高度为20px，但是由于第5个col太高，所以IE在所有行中平均分割成neccassaryfilling，而FF尊重分配行高，只扩展最后一行w / oa height-spec（在我的真实
The screenshot below illustrates the problem a bit: 2 rows have a fixed height of 20px, but as the 5th col is too heigh, IE splits the neccassary "filling" equally across all rows, whereas FF respects the assign row-height and only extends the last row w/o a height-spec. (In my real case, also FF renders incorrectly and enlarges rows w fixed height).
所以我想知道是否有一个安全的（跨浏览器）解决方案来解决这个问题。
So I wonder if there is perhaps a safe (cross-browser) solution to fix this???
代码：
<!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>
推荐答案
height 属性，以及height属性，您看到的额外填充/边距是由于行高计算的结果，通过定义它，您将能够修复它，并保持它在浏览器之间不变。
Try setting the line-height property instead/as well as the height property, the extra padding/margins you're seeing is as a result of line-height calculations, by defining it you'll be able to fix it and keep it constant between browsers.
这篇关于IE和FF呈现我的表“意外”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
