1

私は 2 つのテーブル要素を持っています。どちらも位置: 絶対スタイルです。最初のテーブルはある種のレイアウトを担当し、width: 100%を持ち、2 番目のテーブルはいくつかの入力コントロールを表示し、幅: 400pxで中央に配置されます。

IE で問題が発生しました。最初のテーブルが 2 番目のテーブルをカバーしているように見えます。たとえば、マウスを使用して入力要素にフォーカスを設定できません。また、開発者ツールで遊んで、入力要素をクリックして検査しようとすると、実際に検査される要素は最初のテーブル要素です。入力要素にフォーカスを設定するには、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

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を参照してください。

于 2011-02-04T07:30:10.470 に答える