0

私はこのサンプルを持っています: http://jsfiddle.net/z5BCm/ これは内部に 2 つの div を含む div であり、そのうちの 1 つは特定のサイズ (たとえば 500x500) と高い zIndex (9998) を持つテーブルであり、もう 1 つの div にはzIndex が低い内部の入力テキスト。問題は、テーブル zindex がすべてをカバーしている場合、IE10 で入力にアクセスできるのはなぜですか? Google Chrome、Firefox、Safari などで正しく動作します。

<!DOCTYPE html>
<html>

    <head></head>

    <body>
        <div style="width:100%; height:100%">
            <div style="left: 0px; top: 0px; width: 663px; height: 574px; display: block; position: absolute; z-index: 99998;">
                <table width="100%" height="100%">
                    <tbody>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="left: 11px; top: 27px; width: 110px; height: 36px; display: block; position: absolute; z-index: 0;">
                <div style="left: 0px; top: -15px; height: 15px; display: block; position: absolute; z-index: 2;"><font class="label" style="white-space: nowrap; cursor: default;" draggable="false"><strong>Login</strong><strong style="color: rgb(255, 0, 0);">&nbsp;*</strong></font>
                </div>
                <div style="left: 0px; top: 0px; width: 110px; height: 21px; display: block; position: absolute; z-index: 2;">
                    <input name="WFRInput100000005" class="edit" style="z-index:1;width: 110px; height: 21px; text-decoration: none; background-color: rgb(255, 255, 255);" type="text" maxlength="20" autocomplete="on">
                </div>
            </div>
        </div>
    </body>
4

1 に答える 1

2

And old question, I know, but I just ran into this myself. The issue is IE's tendency to ignore transparent elements (see this SO for more details). I was able to hack a fix on your fiddle by adding a white background color (with opacity set to 0) to the table's parent div.

Here's the updated fiddle: http://jsfiddle.net/z5BCm/1/ Specifically, here's what changed:

        <div style="left: 0px; top: 0px; width: 663px; height: 574px; display: block; position: absolute; z-index: 99998; background-color: white; opacity:0;">
于 2014-07-29T20:12:02.663 に答える