Question

我已经为IE6阅读了这个iFrame workaround。但如果我动态显示DIV，我真的不明白如何使用它。

我附上了样本。单击input元素时，我想显示一个具有最顶层z-index的div面板。（应该在选择控件上显示）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test</title>

  <script type="text/javascript">
    function showItem(obj) {
      obj.style.visibility = 'visible';
      obj.focus();
    }
  </script>

</head>
<body>
  <input onclick="showItem(myPanel)" />
  <div id="myPanel" style="position: absolute; top: 35px; left: 10px; width: 200px;
    height: 200px; background-color: Gray; visibility: hidden; color: Silver;">
    Hello world
  </div>
  <div>
    <select name="thisDD" id="thisDD">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</body>
</html>

Answer 1

要使用iframe变通方法，您需要在相同坐标，相同宽度，相同高度和低z-index下声明iframe。

<iframe id="iframe" style="position: absolute; top: 35px; left: 10px; width: 200px; height: 200px; visibility: hidden; z-index: 1" frameborder="0"></iframe>

然后你需要在div上声明一个更高的z-index：

<div id="myPanel" style="...; z-index: 2"></div>

然后当你showItem时，显示iframe和div。 iframe将位于div后面，因为它的z-index较低。

如何解决这个IE6 z-index错误？

1 个答案: