Question

我有两个表元素，两者都有 position：absolute 样式。第一个表负责某种布局，宽度：100％，第二个表格显示一些输入控件，并且宽度：400px 并居中。

在IE中我遇到了问题：第一个表似乎覆盖了第二个表，例如我无法使用鼠标将焦点设置到我的输入元素中。此外，当我使用开发人员工具，并尝试检查输入元素时，通过单击它，实际检查的元素是第一个表元素。我必须使用TAB将焦点设置为输入元素。

在FF＆amp ;; Chrome＆amp;戏。

知道发生了什么事吗？我试过玩z-index：没有帮助。

由于

编辑：那些是表格：

表1

<table width="250" id="loginbox" style="z-index: 1001; position: absolute; left: 706.5px; top: 150px;">
<tbody>
    <tr>
        <td>Username:</td>
        <td width="150" style="text-align: right;">
            <input type="text" style="width: 150px;" class="brandBorder" id="username" name="username">
        </td>
    </tr>
    <tr>
       <td>Password:</td>
        <td>
            <input type="password" style="width: 150px;" class="brandBorder" id="password" name="password">
        </td>
    </tr>
    <tr>
        <td align="right" colspan="2">
            <input type="submit" class="button" id="LoginButton" value="Login" name="LoginButton">
        </td>
    </tr>
    <tr>
        <td align="center" colspan="2">
            <br>
            <br>
            <span class="error" id="msg"></span>
        </td>
    </tr>
</tbody>

表2

<table style="right: 0px; left: 0px; margin: 0px; width: 100%; position: absolute; top: 0px;">
    <tbody><tr>
        <td style="background-image: url('login-tbg.gif'); width: 499px; background-repeat: repeat-x; height: 60px;">
            <img border="0" src="login-lt.gif">
        </td>
        <td align="left" style="background-image: url('login-tbg.gif'); width: 30%; background-repeat: repeat-x; height: 60px;">
        </td>
        <td style="background-image: url('login-tbg.gif'); width: 15px; background-repeat: repeat-x; height: 60px;">
            <img border="0" src="login-tm.gif">
        </td>
        <td align="right" style="background-image: url('login-tr.gif'); width: 30%; background-repeat: repeat-x; height: 60px;">
            <br>
            <img border="0" src="login-right.gif">&nbsp;
        </td>
    </tr>
    <tr style="height: 99%;">
        <td valign="top" align="center" style="height: 99%;" colspan="3">
        </td>
        <td class="loginsidebar">
        </td>
    </tr>
</tbody>

这些表格在表单元素中彼此相邻。请不要告诉我它应该在DIV上制作...... :)我知道：）

Answer 1

您是否声明了doctype？即：

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

请参阅http://en.wikipedia.org/wiki/Quirks_mode#Triggering_different_rendering_modes

两个有位置的表：绝对问题

1 个答案: