2

我有一个看起来像这样的页面：

<html>
    <body>
        <div id="outer">
            <div id="inner">
                <img width="300" height="250" src="someimage.jpg"/>
            </div>
        </div>
    </body>
</html>

CSS样式是这样的：

*{
    margin:0px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

body {
    width:100%;
    height:100%;
    background:red;
    overflow:hidden;
}

#outer {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  display:-webkit-box;
  -webkit-box-orient:horizontal;
  -webkit-box-pack:center;
  -webkit-box-align:center;
  overflow:hidden;
  border: 1px solid blue;
}

我得到了很多奇怪的行为：

  1. 在 WebView 中初始加载网页时，我看到的只是一条蓝线。inner就像div中没有​​图像一样。
  2. 在第一次刷新时，WebView 会慢慢扩大到 100% 的高度。它慢慢地显露出来someimage.jpg。这就像outerdiv 的动画，因为它慢慢意识到它需要占据整个屏幕。
  3. 在所有后续刷新中，不会发生展开动画。一切看起来都很好。

网页的前两次加载中发生了什么？

另一个奇怪的事情是，如果我没有那个蓝色边框，#2 和#3 就不会发生。也就是说，我只被一条蓝线困住，这实际上是折叠的蓝色边框div。我不明白为什么我需要边框来inner显示 div 的内容。

请注意，我对所有负载都使用相同的 WebView。也就是说，它只是在调用WebView#loadUrl.

4

1 回答 1

0

我想知道为什么它会以这种方式“扩展”：我没有添加带有任何布局参数的 WebView！看来我所有的问题都源于这个小细节。

于 2013-03-04T05:52:52.253 回答