Table layout wrong in IE(7)

2019-05-05 05:09发布

站内文章 / 后端开发
37 0 0

问题:

Below is the code of a simple html with a table layout. In FF it's looking as I think it should look like, in IE7 it doesn't. what am I doing wrong?

And how can I fix it?

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

回答1:

I assume you are complaining about the minimal height of the middle row (the one containing only rowspanned cells), and the enlarged height of the adjacent rows to compensate, leaving gaps between the divs.

IE cannot calculate optimal row heights when the row contains only rowspanned cells. The usual solution when you absolutely cannot rejig it to get rid of the rowspan is to add a 1px 'dummy' column to one side of the table, containing empty cells, each with the 'height' set to how high the row should be.

But yes, depending on what you're planning to do with this, a CSS layout may well be more appropriate. If it's really a fixed-pixels-for-everything layout like this example, absolute positioning for each div will be a lot, lot easier.

Other bits: CSS width/height values require units (presumably 'px'); valign/cellspacing/etc. can be more easily done in a stylesheet even if you are using table layouts; a standards-mode DOCTYPE may prevent some of the worse IE bugs (although, not this old, non-CSS-related one).



回答2:

For a start, your CSS values should have units, e.g. width:190; should be width: 190px;



回答3:

completely agree, you can have a look at blueprint CSS or other CSS frameworks for some help



回答4:

At first sight it looks like IE7 has some broken support for this kind of formatting. At first I was going to propose to get rid of the divs and move the formatting (width and height) directly on the TD, but I tried that and doesn't seem to solve the problem.

I guess this is not a nice solution, but would it be possible to replace the rowspan cells with more cells with an invisible border between them? However this solution fails if the text is larger than the size of the upper cell.



回答5:

The choice of Doctype (4.01 Transitional with no system identifier (url)) triggers Quirks mode in IE which makes it highly inconsistent with other browsers.

Switch to:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Or at least:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

(and, of course, validate but the HTML and CSS (which would pick the the missing units on your length values)).



回答6:

You should definitely go with CSS. Tables should NEVER be used for layout.



标签： html layout internet-explorer-7 html-table
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~