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

Internet Explorer中的表行高度

  •  10
  • Fritz H  · 技术社区  · 17 年前

    我有下表:

    <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 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    

    我需要保留这一点,因为页面上的其他一些元素依赖于一些复杂的基于CSS的布局。

    有人能为我指出正确的方向,让我为IE做好准备吗?

    EDIT:应该早就提到了——这个表是使用javascript动态调整大小的。

    9 回复  |  直到 17 年前
        1
  •  1
  •   Adam Adriaan Stander    13 年前

        2
  •  8
  •   Gineer    17 年前

    试试这个:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
        3
  •  4
  •   Skuta Attila    17 年前

    您可以使用垫片,而不是使用高度属性(因为它会引起问题)。例如,一个透明的小gif,你也可以将高度设置为你想要的大小。你会这样做的gif: <img src="./gfx/spacer.gif" style="height:14px;" />

        4
  •  1
  •   bobince    17 年前

    那么,也设置一下怎么样:

    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%(这反过来又使表比它应该的高)。你 可以

        5
  •  1
  •   gmike    15 年前

    <div style="font-size:0pt;"> </div>

        6
  •  1
  •   hendra ong    15 年前

    试试这个

    <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>
    
        7
  •  1
  •   Cosmin    14 年前

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

    对于高度,在合并后的中间一栏中,我只写 <tr width

    希望这能有所帮助。

        8
  •  1
  •   Zairja    13 年前

    width

    style="width: 25%"
    

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

    .squares {
    text-align: left;
    margin: 0 auto;
    height:250px; width:250px;
    }
    
        9
  •  0
  •   Somnath    15 年前

    试试这个。..它为我工作。。。

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