0

我有这个示例： http: //jsfiddle.net/z5BCm/ 这是一个 div，其中包含 2 个 div，其中一个是具有特定大小（例如 500x500）和高 zIndex（9998）的表，另一个 div 有内部具有低 zIndex 的输入文本。问题是：为什么在 IE10 中，如果表 zindex 覆盖它，我可以访问输入？它可以在 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

老问题，我知道，但我自己也遇到了这个问题。问题是 IE 倾向于忽略透明元素（有关更多详细信息，请参阅此 SO）。我能够通过向表的父 div 添加白色背景颜色（不透明度设置为 0）来修复您的小提琴。

这是更新的小提琴： http: //jsfiddle.net/z5BCm/1/ 具体来说，这里有什么改变：

        <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 回答