Some CSS styles not applied in html when it as a mail using javax mail

问题

I am trying to send a formatted html as a mail using Javax mail API. The mail util-code used is

Message message = new MimeMessage(session);
message.setFrom(new InternetAddress(from));
message.setHeader("Auto-Submitted", "auto-generated");
message.setReplyTo(InternetAddress.parse(commaSeperatedReplyTo));

Multipart multipart = new MimeMultipart();
    if (body != null) {
       MimeBodyPart messageBodyPart = new MimeBodyPart();
       messageBodyPart.setContent(body, "text/html;charset=utf-8");
       multipart.addBodyPart(messageBodyPart);

    }
message.setContent(multipart);

And the html body generated was

<html>
    <body>
        <style type="text/css">

            #content ul li{
                display:inline !important;
                float:left;
                padding: 7px;
                margin-right: 4px;
                font-style: italic;

            }
        </style>

        <font face ="Arial" size=4> <U>DESCRIPTION</U>:Test </font><br/><br/>                       
            <div id="content">              
                <ul>
                        <li> component_id</li>
                        <li> component_type_id</li>
                        <li> name</li>
                        <li> update_user</li>
                        <li> update</li>
                        <li> key</li>
                        <li> field</li>
                </ul>                       

            </div>  
    </body>
 </html>

I am expecting this to display inline, not up and down. I tested the generated html in fiddle also. Working as expected. But, in the mail, i am getting it as normal list. Why inline display is not working in email?

need help

回答1:

E-mail-clients often do not follow standards. Some clients like gMail even ignore CSS-declarations in a <style>-block. CampaignMonitor has some great resources on how to create HTML-e-mails that are supported by most clients.

You should convert your layout to something like this (use tables!):

<html>
    <body>
        <font face="Arial" size=4><U>DESCRIPTION</U>:Test</font>
        <br/>
        <br/>
        <table>
            <tr>
                <td>component_id</td>
                <td>component_type_id</td>
                <td>name</td>
                <td>update_user</td>
                <td>update</td>
                <td>key</td>
                <td>field</td>
            </tr>
        </table>
    </body>
</html>

Then you can style the table/cells using inline CSS.