Android WebView 无法正确显示表格

Question

我有一个简单的 WebView 应用程序来显示网站。问题是当我在 API 16 上运行应用程序时，WebView 始终无法正确显示表格。如果我重新启动该应用程序几次，它最终会正常加载。虽然看似随机，但它会对桌面做一些疯狂的事情。我还在 API 19、20 和 21 上运行过这个应用程序，但从未遇到过这个问题。

加载正常时:

当它不存在时

以下是我从该项目中提取的代码 fragment 。我还应该注意，我在 loadUrl 之前在 list 和 javascript 中启用了 Internet 权限等基础知识。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main_webview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</WebView>

MainActivity.java

public class MainActivity extends Activity {

private WebView mWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mWebView = (WebView) findViewById(R.id.activity_main_webview);

    // Enable Javascript
    WebSettings webSettings = mWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);

    webSettings.setDomStorageEnabled(true);
    mWebView.loadUrl("http://www.mywebsite.com/page.html");

}

在 WebView 中加载 HTML

<div style="z-index: 5001; position: fixed; width: 100%; top: 0px; background-color: white;">
<table style="width: 100%; text-align: center;">
<tbody>
<tr>
<td style="border: 1px solid silver;" id="menu1-t" ><img style="width: 100%; max-width: 60px;" src="images/image.png" ></td>
<td style="border: 1px solid silver;" id="menu2-t" ><img style="width: 100%; max-width: 60px;" src="images/image.png" ></td>
<td style="border: 1px solid silver;" id="menu3-t" ><img style="width: 100%; max-width: 60px;" src="images/image.png" ></td>
<td style="border: 1px solid silver;" id="menu4-t" ><img style="width: 100%; max-width: 60px;" src="images/image.png" ></td>
<td style="border: 1px solid silver;" id="menu5-t" ><img style="width: 100%; max-width: 60px;" src="images/image.png" ></td>
<td style="border: 1px solid silver;" id="menu6-t" ><img style="width: 100%; max-width: 60px;" src="images/image.png" ></td>
</tr>
</tbody>
</table>
</div>

如果有人以前看过这个或有任何想法，将不胜感激。

Answer 1

似乎只需将 table-layout: fixed 和 box-sizing: border-box 添加到我的表格就可以解决问题。