android webview 不能正确渲染子弹答案

【问题标题】：android webview doesn't render bullets properlyandroid webview 不能正确渲染子弹
【发布时间】：2015-01-28 18:08:42
【问题描述】：

我有一个安卓电子邮件客户端。当它在 mac 中收到来自 outlook2011 的消息时，我得到一个像这样的 html 数据：

<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; color: rgb(0, 0, 0); font-size: 14px; font-family: Calibri, sans-serif; "><ol><li>One</li><li>Two</li><li>Three</li></ol></body></html>

它可以正确显示子弹。但是，当我在 Windows 中收到来自 Outlook2013 的类似消息时，我得到了这个 html 数据：

<html>
<head>
<style>
<!--
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif"}
-->
</style>
</head>
<body lang="EN-US" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoListParagraph" style="text-indent:-.25in"><span style="">1.<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span>one</p>
<p class="MsoListParagraph" style="text-indent:-.25in"><span style="">2.<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span>two</p>
<p class="MsoListParagraph" style="text-indent:-.25in"><span style="">3.<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span>three</p>
</div>
</body>
</html>

并且我的应用程序中的 webview 无法呈现项目符号。它显示文本，但没有项目符号（编号列表）。

webview 代码很简单。

private WebView  mMessageContentView;   //declaration
onCreate() {
mMessageContentView = whatever.getView(view, R.id.message_content);
//setup some zoom settings etc etc
mMessageContentView.setWebViewClient(someWebViewClientInstance);
}

private void setMessageHtml(String html) {
        if (html == null) {
            html = "";
        }
        if (mMessageContentView != null) {
            mMessageContentView.loadDataWithBaseURL("email://", html, "text/html", "utf-8", null);
        }
    }

我该如何解决这个问题？

【问题讨论】：

添加定义MsoListParagraph的样式表并添加您的项目符号。
好的。我有一个包含定义的 bullet.css 文件。如何将其添加到 android webview 以便使用此 css 文件。
最简单的方法是将其粘贴到文档中，以及其他 CSS 规则。

标签： android html css webview outlook

【解决方案1】：

我在 assets 文件夹的 style.css 文件中添加了以下定义。

p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin:0in;
    margin-bottom:.0001pt;
    font-size:12.0pt;
    font-family:Cambria;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
    {margin-top:0in;
    margin-right:0in;
    margin-bottom:0in;
    margin-left:.5in;
    margin-bottom:.0001pt;
    font-size:12.0pt;
    font-family:Cambria;}
.MsoChpDefault
    {font-family:Helvetica;}

然后编辑以下代码，添加外部css文件。

private void setMessageHtml(String html) {
    if (html == null) {
        html = "";
    }
    if (mMessageContentView != null) {
        String htmlWithExternalCSS = addStyleDefinition(html);
        mMessageContentView.loadDataWithBaseURL("email://", htmlWithExternalCSS, "text/html", "utf-8", null);
    }
}
private String addStyleDefinition(String html) {
    //insert at the end of <head> tag
    String headTag = "<head>";
    int index = html.indexOf(headTag);
    StringBuffer buff = new StringBuffer(html);
    buff.insert(index+headTag.length(), "<link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/style.css\" />";);
    return buff.toString();
}

【讨论】：