在Outlook 2010中查看的新闻稿模板中的按钮看起来不同

时间:2014-03-02 12:09:10

标签: html responsive-design outlook newsletter

嗨我有问题与outlook中的新闻稿模板按钮似乎太软,但我在其他表中使用相同的代码这个按钮ans在其他表似乎确定:( 这是我这个表的代码

                                     
                                                                                                                                                                                                                                   

                                                                                                                                                                                                     

                                    <table cellspacing="0" cellpadding="0">
                                        <tbody><tr>
                                            <!--<td valign="top" class="" style="padding:0 0px 15px 0">

                                            </td>-->
                                            <td valign="left" class="" style=""><a style="text-decoration: none; font-size: 16px; color: #394A58; font-weight: bold; font-family:Arial, sans-serif " href="#">Info </a>
                                            </td>
                                        </tr>
                                    </tbody></table>    
                                     <p class="" style="color:#394A58; text-align:left; font-size: 11px; line-height:17px">Iste natus error sit volu ptatem accusa tium dolor emque lauda ntium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
                                        <table cellspacing="0" cellpadding="0" width="90" height="20" align="left" style="mso-table-lspace:5px;mso-table-rspace:5px; margin:0;">

                                                    <tbody>
                                                        <td bgcolor="#c8c8ca" align="center" class="" style=";padding-top:2px; padding-right:0px;padding-bottom:2px ;padding-left:0px;background-color:#c8c8ca; border-top:0px ; border-bottom:0px; border-left:0px;border-right:0px;solid #eee; background-repeat:repeat-x">
                                                            <a style="
                                                            mso-table-lspace:5px;mso-table-rspace:5px;
                                                            color:#394A58;
                                                            font-size:12px;
                                                            font-weight:bold;
                                                            text-align:center;
                                                            text-decoration:none;
                                                            font-family:Arial, sans-serif;
                                                            -webkit-text-size-adjust:none;" href="">
                                                                    Read More
                                                            </a>
                                                        </td>
                                                    </tbody></table>
                                                </td>
                                            </tr>      
                                        </tbody></table>                                                        
                                    </td>
                              </tr>

我使用相同的代码来创建此表中的按钮,但这看起来不同:

https://imageshack.com/i/15x5qpp

和其他客户

https://imageshack.com/i/f1mmxfp

有人可以帮忙吗?

1 个答案:

答案 0 :(得分:0)

你不需要这一切。以下是使按钮工作的两种方法:

设置填充,没有表格高度:

<table width="90" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#c8c8ca" align="center" style="color:#394A58; font-family:Arial, sans-serif; font-size:12px; text-decoration:none; font-weight:bold; padding:10px;">
      Read More
    </td>
  </tr>
</table>

设置表格高度和垂直对齐。

<table width="90" height="35" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#c8c8ca" align="center" valign="middle" style="color:#394A58; font-family:Arial, sans-serif; font-size:12px; text-decoration:none; font-weight:bold;">
      Read More
    </td>
  </tr>
</table>

另外,请将-webkit-text-size-adjust:none;放在<body>样式标记中,然后您就不必一遍又一遍地调用它。