0

我见过一些关于 Android 浏览器的错误记录，以及它如何处理通常用于模态对话框的绝对定位的“shroud”元素。这是一个jsbin示例。. 在合理的浏览器上单击“显示”按钮应该会显示一个带有“确定”按钮的小框。的HTML：

  <div id=content>
    <button type=button>Show</button>
    <p>
    This is the contents of the page.
    <p>
    This is the contents of the page.
    <p>
    This is the contents of the page.
    <p>
    This is the contents of the page.
    <p>
    This is the contents of the page.
    <p>
    This is the contents of the page.
    <p>
    This is the contents of the page.
</div>

<div id=shroud>
</div>
<div id=frame>
    This is a frame.
    <button type=button>Ok</button>
</div>

JavaScript 只是隐藏和显示“框架” <div>：

$(function() {
  $('body')
    .on('click', '#content button', function(ev) {
      ev.preventDefault();
      $('#frame, #shroud').show();
    })
      .on('click', '#frame button', function(ev) {
        ev.preventDefault();
        $('#frame, #shroud').hide();
      });
});

而CSS只是一些简单的定位。主要内容、裹尸布和框架都有“z-index”值来显式堆叠它们。

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

button {
  font-size: 18px;
  font-weight: bold;
  color: rgb(20,24,42);
  background-color: yellow;
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

#frame {
  background-color: #e2f0fa;
  height: 100%;
  z-index: 0;
}

#shroud {
  display: none;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  z-index: 10;
  background-color: rgba(0,0,0,0.4);
}

#frame {
  display: none;
  position: absolute;
  top: 50px; left: 20px;
  width: 200px; height: 200px;
  border: 2px solid #336699;
  border-radius: 10px;
  background-color: #f0f2f9;
  padding: 20px;
  z-index: 20;
}

所以我在 Android 4.0.3 和 4.1 上注意到的问题是小“框架”框根本没有出现。shoud<div>确实如此，有时我可以用手指“摆动”页面，有时会部分显示框架框，并且（我认为）总是在裹尸布下，即使它的“z-index”更大。

现在我不确定为什么有人会在 Chrome 支持的新设备上使用 Android 浏览器，但我可能会猜到有人。有没有其他人看到这个？我什至没有找到类似的错误报告；我已经看到有关旧版本的东西在输入元素“渗入”覆盖元素方面存在愚蠢的问题，但没有这样的事情。

我已经用一些较旧的 2.2 和 2.3 手机尝试了该测试页，它运行良好。但是我的 HTC One X 和我的 Nexus 7 都失败了。

4

0 回答 0