Question

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

<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;
}

我有很多奇怪的行为：

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

网页的前两个载荷发生了什么？

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

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

Answer 1

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

Div渲染为空

1 个答案: