表布局的是错误的,在即(7)
-
10-07-2019 - |
题
下面是代码的简单html表的布局。在FF它看起来,因为我认为它看起来应该像,
在IE7它不。我做错了什么?
和我如何能解决这个问题?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<TITLE>test</TITLE>
</head>
<body>
<table id="MainTable" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td colspan="4">
<div style='width:769; height:192;'>192
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div style='width:383; height:100;'>100
</div>
</td>
<td rowspan="2" valign="top">
<div style='width:190; height:200;'>200
</div>
</td>
<td rowspan="2" valign="top">
<div style='width:190; height:200;'>200
</div>
</td>
</tr>
<tr>
<td valign="top" rowspan="2">
<div style='width:190; height:200;'>200
</div>
</td>
<td valign="top" rowspan="2">
<div style='width:190; height:200;'>200
</div>
</td>
</tr>
<tr>
<td valign="top">
<div style='width:190; height:100;'>100
</div>
</td>
<td valign="top" >
<div style='width:190; height:100;'>100
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div style='width:383; height:100;'>100
</div>
</td>
<td colspan="2">
<div style='width:383; height:100;'>100
</div>
</td>
</tr>
<tr>
<td>
<div style='width:190; height:100;'>100
</div>
</td>
<td>
<div style='width:190; height:100;'>100
</div>
</td>
<td colspan="2">
<div style='width:383; height:100;'>100
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
解决方案
我想你所抱怨的中间行(一个只含有rowspanned细胞),和在相邻的行,以补偿经扩大高度的最小高度,的div之间留下空隙。
当行只包含rowspanned细胞IE不能计算最佳行高度。通常的解决方案时,你绝对不能rejig它摆脱行跨度的是1px的“虚拟”列添加到表的一侧,包含空单元格,每个设置行应该有多高的“高度”。
但是,是的,这取决于你打算用这个做什么,一个CSS布局可能是更合适的。如果这真是一个固定的像素换家居布局像这样的例子,对于每一个DIV绝对定位将是很多,轻松了许多。
其他位:CSS宽度/高度值需要单元(大概 'PX'); VALIGN / CELLSPACING /等。可即使您使用表格布局样式表更容易进行;一个标准的模式DOCTYPE可能阻止一些越差IE错误的(尽管,不这个老的,非CSS相关的一个)。
其他提示
有关的开始,你的CSS值应该有单元,例如width:190;
应width: 190px;
完全同意,你可以看看蓝图CSS或其它CSS框架一些帮助。
乍一看,它看起来像IE7有一些破碎的支持这样的格式。首先,我要建议,以摆脱div和移动的格式(宽和高度)直接在TD,但是我试过,似乎并不解决问题。
我猜这不是一个很好的解决方案,但它将能够更换行细胞的多个细胞的一种无形的边界之间,他们吗?但是这个解决方案如果失败的文本是更大的尺寸上的细胞。
文档类型的选择(4.01过渡没有系统标识符(URL))触发IE怪癖模式这使得它与其他浏览器高度不一致。
切换到:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
或者至少:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
(并且,当然,验证但是HTML和CSS(这将挑缺少的单位在您的长度值))。
您一定要使用CSS去。表不应该被用于布局。