表格错误在IE浏览器(7)
下面是一个简单的HTML与表格布局的代码。 在FF中,它看起来应该是这样的,它在IE7中看起来不像 。我究竟做错了什么?
我该如何解决它?表格错误在IE浏览器(7)
<!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>
我假设你抱怨中间行的最小高度(只包含跨越行的单元的高度)和相邻行的放大高度进行补偿,在div之间留下间隙。
当行只包含行跨单元时,IE无法计算最佳行高。通常的解决方案,当你绝对不能调整它来摆脱行跨时,通常的解决方案是在表的一侧添加一个1px“虚拟”列,其中包含空单元格,每个单元格的“高度”设置为行应该有多高。
但是,根据你打算做什么,CSS布局可能更合适。如果它像这个例子那样是一个固定像素的东西,那么每个div的绝对定位将会非常容易。其他位:CSS宽度/高度值需要单位(可能是'px'); VALIGN/CELLSPACING /等。即使您使用表格布局,也可以更容易地在样式表中完成;一个标准模式的DOCTYPE可能会阻止一些更糟糕的IE错误(尽管不是这个旧的,与非CSS相关的错误)。
完全一致,你可以看看蓝图CSS或者一些帮助
一开始其他的CSS框架,你的CSS值应该有单位,例如width:190;
应该是width: 190px;
是,这几乎肯定是问题的原因,但对问题更具体的描述将有助于我们确定这一点。 – 2008-10-13 11:27:51
乍一看,它看起来像IE7有一些支持这种格式。起初,我打算建议摆脱div,并直接在TD上移动格式(宽度和高度),但我尝试了这一点,似乎并没有解决问题。
我想这不是一个很好的解决方案,但它有可能用更多的单元格与他们之间的不可见边框替换rowspan单元格?但是,如果文本大于上部单元格的大小,则此解决方案会失败。
你一定要用CSS。不应该将表格用于布局。
Doctype(4.01 Transitional没有系统标识符(url))的选择触发IE中的Quirks模式,这使得它与其他浏览器高度不一致。
切换到:
<!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">
(和,当然,validate但HTML和CSS(这会挑上你的长度值的缺失单位) )。
如果您使用严格的文档类型,它看起来有什么不同吗? – Neall 2008-10-13 11:16:11
除了这些其他评论之外,创建一个最小测试用例(例如减少行数)会很好,a)您可以更准确地识别问题b)所以上面发布的示例代码的大小可以减小 – 2008-10-13 11:35:33