带有文档类型和 z-index 的 IE10 html5答案

【问题标题】：IE10 html5 with doctype and z-index带有文档类型和 z-index 的 IE10 html5
【发布时间】：2013-09-05 16:19:39
【问题描述】：

我有这个样本：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>

【问题讨论】：

标签： html z-index internet-explorer-10 doctype

【解决方案1】：

老问题，我知道，但我自己也遇到了这个问题。问题在于 IE 倾向于忽略透明元素（有关详细信息，请参阅 this 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;">

【讨论】：