0

考虑以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            .box-2 { position: absolute }

            /* Styling */
            .box-1 { background-color: #ccc; width: 3em  }
            .box-2 { background-color: #ddd; width: 3em  }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div class="box-1">1</div>
                </td>
                <td>
                    <div class="box-2">2</div>
                </td>
            </tr>
        </table>
    </body>
</html>

这呈现为：

框 2 低于框 1 http://img.skitch.com/20100512-cr58jx4p5k37n4fcm6cn8h6dde.png

为什么框 2 与框 1 不在同一级别？它有一个position: absolute, no topor left，所以我希望它被排除在正常流程之外，而不会影响它的位置。（请注意，我不是试图通过更改 CSS 来解决“问题”，而是要了解为什么浏览器会以这种方式呈现此框。）

4

1 回答 1

2

那是因为td有一个本地人vertical-align:middle。因为您.box-2不再占用任何空间，所以顶部设置为单元格的中间。如果您将valignor设置vertical-align为tdto top，它将按您期望的方式工作。

于 2010-05-12T19:54:54.640 回答