1

我有两个表格元素，都具有位置：绝对样式。第一个表格负责某种布局的东西，有width: 100%，而第二个显示一些输入控件，有width: 400px并且居中。

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

在 FF & Chrome & Opera 中一切正常。

知道发生了什么吗？我试过玩 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 等上制作... :) 我知道 :)

4

1 回答 1

0

你是在声明一个文档类型吗？IE：

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

于 2011-02-04T07:30:10.470 回答