代码之家 › 专栏 › 技术社区 › Mafti

IE(7)中的表格布局错误

html-table internet-explorer-7 layout html

Mafti · 技术社区 · 16 年前

下面是带有表布局的简单HTML的代码。在FF中,它看起来就像我认为的那样, 在IE7中没有。我做错了什么?

我该怎么修?

<!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>

6 回复 | 直到 8 年前

bobince 16 年前

我假设您在抱怨中间行的最小高度(仅包含行窗格单元格的高度),以及相邻行的放大高度以进行补偿,在分隔之间留下间隙。

当行仅包含行窗格单元格时,IE无法计算最佳行高。通常的解决方案是,当您完全无法重新调整它以摆脱行扫描时,在表的一侧添加一个1px的“dummy”列,其中包含空单元格,每个单元格的“height”设置为行的高度。

但是,是的,根据您计划如何处理,CSS布局可能更合适。如果它真的是一个固定的像素为所有的布局像这个例子,每个分区的绝对定位将是非常,非常容易。

其他位:CSS的宽度/高度值需要单位(可能是“px”);即使使用表布局,在样式表中也可以更容易地执行valign/cellspacing/etc;标准模式doctype可以防止一些更糟的IE错误(尽管不是这个旧的、与CSS无关的错误)。

Greg 16 年前

首先,您的css值应该有单位,例如 width:190; 应该是 width: 190px;

roundcrisis 16 年前

完全同意,您可以查看Blueprint CSS或其他CSS框架以获得帮助。

rslite 16 年前

乍一看,IE7似乎对这种格式的支持有些欠缺。起初,我打算取消这些分割,直接在TD上移动格式(宽度和高度),但我尝试过,但似乎解决不了这个问题。

我想这不是一个好的解决方案,但是是否可以用更多单元格替换行扫描单元格,使它们之间有一个不可见的边框?但是,如果文本大于上单元格的大小,则此解决方案失败。

Quentin 16 年前

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(会选择长度值中缺少的单位)。

-3

hmcclungiii 16 年前

你绝对应该使用CSS。表不应用于布局。