代码之家 › 专栏 › 技术社区 › Fritz H

Internet Explorer中的表格行高

internet-explorer css html

Fritz H · 技术社区 · 16 年前

我有下表:

<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)必须是7px宽,中间单元格(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动态调整大小的。

9 回复 | 直到 12 年前

Adam Adriaan Stander 12 年前

不用高度属性(因为它会导致问题),你可以使用一个垫片。例如,一个透明的小GIF,你可以将高度设置为你想要的数量。你只需要这样做: <img src="./gfx/spacer.gif" style="height:14px;" />

Gineer 16 年前

在过去,我发现单元格的高度属性被单元格内的字体大小覆盖,即使不存在字体。将字体大小设置为1或0像素,您的高度将实际生效。

Skuta Attila 16 年前

试试这个:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

bobince 16 年前

使用javascript动态调整此表的大小。

那么也设置一下呢:

table.rows[1].style.height= (totalheight-14)+'px';

明确地?

实际的老派正确答案是:

<tr height="7">...<tr>
<tr height="*">...<tr>
<tr height="7">...<tr>

不幸的是,浏览器从未真正支持HTML__*_/__n*_语法。你可以说:

<tr style="height: 7px;">...</tr>
<tr style="height: 100%;">...</tr>
<tr style="height: 7px;">...</tr>

但IE从字面上看,它使中间一行的高度占整个桌子高度的100%(这反过来又使桌子比它应该高)。你能够结合IE黑客的使用,也许可以使该浏览器上桌子的高度减小14px。

gmike 14 年前

在打印预览和打印副本中也会出现IE9测试版的行高过高问题。例如,当您尝试打印1倍高的行时,行高问题就会出现。修复,我补充说 <div style="font-size:0pt;"> … </div> 围绕整个HTML代码块。

hendra ong 13 年前

试试这个

<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 height="100%">
        <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>

Cosmin 13 年前

我要做的是先用所有行的宽度和高度声明最外面的列,然后将中间列中的所有行与行跨度合并。

对于高度,在合并后的中间一列,我只写 <tr width 没有高度,所有浏览器都不支持高度。不需要赠品。它一直在为我工作。

希望这能有所帮助。

Zairja 12 年前

我也有类似的问题。我注意到了 width 属性有时需要定义为与IE一起使用的百分比

style="width: 25%"

然后在CSS中绝对定义跨浏览器连续性

.squares {
text-align: left;
margin: 0 auto;
height:250px; width:250px;
}

Somnath 13 年前

试试这个……对我有用……

<td style="height:2px;font-size:2px;">
     <img  height="2px" alt="" src="images/transparent.gif" />
</td>