android webview无法正确渲染项目符号

时间:2015-01-28 18:08:43

标签: android html css webview outlook

我有一个Android电子邮件客户端。当它从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);
        }
    }

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

我在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();
}