两个表的位置：绝对问题
我有两个 table 元素，都具有 position:absolute 样式。第一个表格负责某种布局，具有宽度：100％，而第二个表格则显示一些输入控件，具有宽度：400px并且居中。
在 IE 中我遇到了问题：第一个表似乎覆盖了第二个表，例如我无法使用鼠标将焦点设置到我的输入元素中。此外，当我使用开发人员工具并尝试通过单击输入元素来检查它时，实际检查的元素是第一个 table 元素。我必须使用 TAB 将焦点设置到输入元素中。
FF 和 FF 中一切正常铬和歌剧。
知道发生了什么事吗？我尝试使用 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">
</td>
</tr>
<tr style="height: 99%;">
<td valign="top" align="center" style="height: 99%;" colspan="3">
</td>
<td class="loginsidebar">
</td>
</tr>
</tbody>
这些表格在表单元素中彼此相邻。请不要告诉我它应该在 DIV 等上制作...:)我知道:)
I'm having two table elements, both with position: absolute style. First table is responsible for some kind of layout stuff, has width: 100%, while second displays a few input controls, and has width: 400px and is centered.
In IE I run into issue: first table seems to cover second table, for instance I can't set focus into my input elements using mouse. Also when I play with Developer Tools, and try to inspect input element, by clicking on it, the element which actually gets inspected is first table element. I have to use TAB to set focus into input element.
Everything works fine in FF & Chrome & Opera.
Any idea what's going on? I've tried to play with z-index: not helped.
Thanks
EDIT: those are tables:
table 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>
table 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">
</td>
</tr>
<tr style="height: 99%;">
<td valign="top" align="center" style="height: 99%;" colspan="3">
</td>
<td class="loginsidebar">
</td>
</tr>
</tbody>
And those tables are sitting next to each other in form element. Please, don't tell me that it should be made on DIV etc... :) I know it :)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您正在声明文档类型吗？即：
参见http://en.wikipedia.org/wiki/Quirks_mode#Triggering_ Different_rendering_modes
Are you declaring a doctype? i.e.:
See http://en.wikipedia.org/wiki/Quirks_mode#Triggering_different_rendering_modes