我有下表:
<table>
<tr>
<td style="height: 7px; width: 7px"> A1 </td>
<td style="height: 7px"> B1 </td>
<td style="height: 7px; width: 7px"> C1 </td>
</tr>
<tr>
<td style="width: 7px"> A2 </td>
<td> B2 </td>
<td style="width: 7px"> C2 </td>
</tr>
<tr>
<td style="height: 7px; width: 7px"> A3 </td>
<td style="height: 7px"> B3 </td>
<td style="height: 7px; width: 7px"> C3 </td>
</tr>
</table>
基本思想是第一行必须有 7 个像素高。最左边和最右边的单元格(A1 和 C1)的宽度必须为 7 像素,中间的单元格 (B1) 必须根据表格的宽度进行缩放。底行(A3、B3、C3)也是如此。
然而,中间一行需要缩放高度 - 换句话说,它需要是 (tableheight - 14px)
。最左边和最右边的单元格(A2、C2)需要 7 像素宽。
一个例子:
7px x 7px
|------|-------------------------|------|
--- +------+-------------------------+------+
| | | | |
| 7px | | | |
| | | | |
--- +------+-------------------------+------+
| | | | |
| | | | |
| | | | |
| | | | |
| y | | | |
| | | | |
| | | | |
| | | | |
| | | | |
--- +------+-------------------------+------+
| | | | |
| 7px | | | |
| | | | |
--- +------+-------------------------+------+
但是:在 Internet Explorer 中,宽度可以正常工作(A 列和 C 列为 7px,B 列动态缩放)- 但高度不行。无论我做什么,第 1、2 和 3 行结果正好是表格高度的 33%。不幸的是,我必须使用这个表,所以用一组 DIV 替换它不是一个选项。
我有以下 DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我需要保留它,因为页面上的一些其他元素依赖于一些复杂的基于 CSS 的布局。
任何人都可以指出正确的方向来为 IE 做好准备吗?
编辑:应该早先提到过——这个表是使用 javascript 动态调整大小的。
最佳答案
过去我发现单元格的高度属性会被单元格内的字体大小覆盖,即使没有字体。将字体大小设置为 1 或 0 像素,您的高度将实际生效。
关于html - Internet Explorer 中的表格行高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/727995/