gmail从表中剥离内联css

时间:2017-04-10 11:53:58

标签: html css gmail inline

我有以下html适用于MS Mail,outlook,ios但不适用于gmail。我认为将内置css作为内联将解决问题,但事实并非如此。这两个问题是文字大小显得过大。我想知道是否有办法让gmail使用与其他电子邮件客户端不同的字体大小。此外,我需要在表格中使用空白行并在其中使用& nbsb,但这在gmail中仅显示为& nbsb文本。

更新:修复& nbsp with But fontsize,即使使用!important not working。似乎在gmail中的边距:0表自动无法在gmail中运行

<!DOCTYPE html>
<html>
<header>

</header>

<body lang=EN-US>
  <div style="text-align:center;margin:0 auto;font-size:5vw">
     <img src="cid:swb-image"> 

     <h3 style='padding-left:10px;margin-bottom:0;margin-top:0%;padding-top:0;text-align:left'> Hi firstname, </h3>
     <table style='text-align:left;margin:0 auto;'  >
         <col style='width:6%'>
         <col style='width:6%'>
         <col style='width:6%'>
         <col style='width:6%'>
         <col style='width:6%'>
         <col style='width:6%'>
         <col style='width:6%'>
         <col style='width:6%'>
         <col style='width:6%'>
         <col style='width:6%'>
         <col style='width:6%'>
         <col style='width:6%'>

        <tr>
           <td colspan='12' style='text-align:center'><h3 style='margin-top:8px;margin-bottom:0'> msg1</h3><h4 style='margin-bottom:8px;margin-top:0'>msg2 </h4></td>
        </tr>
        <tr>
           <td colspan='3'>DATE:</td>
           <td colspan='9'>datex</td>
        </tr>
        <tr>
           <td colspan='3'>SKIPPER:</td>
           <td colspan='9'>skipperx</td>  
        </tr>
         <tr>
           <td colspan='3'>BOAT:</td>
           <td colspan='9'>boat</td>
        </tr>
        <tr>
           <td colspan='3'>STATUS:</td>
           <td colspan='9' style='color:colorx'>status</td>
        </tr>
        <!--<tr><td>&nbsp</td></tr> -->
        <tr>
           <td colspan='4'>&nbsp</td>
           <td colspan='4' style='text-align:center;'>Start</td>
           <td colspan='4' style='text-align:center;'>END</td>
        </tr>
        <tr>
           <td colspan='4'>ressailxcl:</td>
           <td colspan='4' style='font-weight:bold;text-align:center'>start</td>
           <td colspan='4' style='font-weight:bold;text-align:center'>end</td>
        </tr>
        <tr>
           <td colspan='12' style='text-align:center'><h5 style='margin-bottom:1%;'>Click on link to update your availability</h5></td>
        </tr>
        <tr> 
           <td colspan='4' style='text-align:left;'><a style='text-decoration:none;' href='mailto:skipemail'>
              <img src="http://www.sailwbob.com/skipper/public/img/email-32.png"  style="width:32px;height:32px;border:0;"></a></td>

           <td colspan='4' style='text-align:center;'><h5> <a href='http://www.sailwbob.com/skipper'>SwB link</a></h5></td>

           <td colspan='4' style='text-align:right';><a style='text-decoration:none' href='tel:skipphone'>
              <img src="http://www.sailwbob.com/skipper/public/img/phone-32.png"  style="width:32px;height:32px;border:0;"></a></td>  

        </tr> 

     </table>
  </div>
  <div>

       <!--skipmsg-->

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

here's a screenshot

1 个答案:

答案 0 :(得分:0)

所以问题真的只是:

[ngClass]="{active: someValue === otherValue}"

在gmail中它太大了但在其他地方5vw工作得很好。

解决方案,在我添加的样式标签中:

font-size:5vw;

并且div的内联css将大小更改为16px。因此,在需要5vw(他们接受样式标签)的浏览器中,他们获得了这个大小,并且在不接受样式标签的地方,他们得到16px。丑陋,但它的工作原理