以前重来都不会使用table去布局,使我陷入了CSS布局的一个误区-只要不是table布局,只要是通过CSS布局的,就是对的,就是符合Web标准的(from 《Web前端开发修炼之道》p26)。我想该停止这条不归路了,所以在最近的项目开发中,在合适的位置都使用了table来布局,用过几次之后感觉嘿还真不错。不过今天在IE6,7下遇到了一个大麻烦,问题描述如下:
一个两行两列的表格,整个表格高度和宽度都固定了,给第一行tr设定了一个高度后在Firefox,chrome,IE8都正常,但是在IE6,7下死活都无效。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css" media="screen">
table {
height: 200px;
}
.h20 {
height: 20px;
}
</style>
</head>
<body>
<table border="0">
<tr class="h20">
<td>小组名:</td>
<td>
<span>我是小组名</span>
<a href="javascript: void(0);" title="编辑">编辑</a>
</td>
</tr>
<tr>
<td>小组简介:</td>
<td>
<p>我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介</p>
<a href="javascript: void(0);" title="编辑">编辑</a>
</td>
</tr>
</table>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css" media="screen">
table {
height: 200px;
}
.h20 {
height: 20px;
}
</style>
</head>
<body>
<table border="0">
<tr class="h20">
<td>小组名:</td>
<td>
<span>我是小组名</span>
<a href="javascript: void(0);" title="编辑">编辑</a>
</td>
</tr>
<tr>
<td>小组简介:</td>
<td>
<p>我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介</p>
<a href="javascript: void(0);" title="编辑">编辑</a>
</td>
</tr>
</table>
</body>
</html>
解决这个问题的方法就是将第二行也设定一个高度,这样第一行的高度也生效了。
是说给第一行tr设定高度后ie6&7不能计算第二行高度的问题么……
keke这到是个简便的方法……
像这样?
table{ height:200px}
小组名:
我是小组名 编辑
小组简介:
我是简介
编辑
汗···代码被编译了···
<table border="0">
<tr style="height:40px">
<td>小组名:</td>
<td><span>我是小组名</span> <a href="javascript: void(0);" title="编辑">编辑</a></td>
</tr>
<tr style="height:160px">
<td>小组简介:</td>
<td><p>我是简介</p>
<a href="javascript: void(0);" title="编辑">编辑</a></td>
</tr>
</table>
是这样么···
第一行tr……写错了吧keke
現在的情況還是有很多地方要結合table的,特別是後台
按标准来说就是语义化,你做的是一个表格,那就用 table 咯。
@澈言 恩,的确写错了,是第一行tr,我的意思是给第一行tr设定高度后在IE6,7下无效。
突然想到的:
如果一个表格你无法确定它的列数,那么它就不应该是一个表格。
比如说,一个表格,如果修改了某些宽度后它的列数应当改变的话,那就应该用多栏或者浮动布局,而不应该用表格。
@依云: 受教了。