2017-09-26 6 views
0

Mac OSからOutlook 2017で作成されたHTML署名を表示するとき、私はAndroid上のGMail Appの奇妙な動作に直面しています。GmailのアプリケーションのOutlook HTML署名:​​の間の要素

まず第一に、ここで私がやったことです:

  1. 私は署名欄にブラウザウィンドウからコンテンツをコピーしたシンプルなテーブルレイアウトでHTML署名を作成し、ブラウザ
  2. にオープンOutlookで( - >設定 - 展望>シグネチャー)
  3. 私は今、署名は、基本的には、ブラウザでOutlook Oを正常に見えるコンテンツ

を貼り付けた後、元の書式を保持しましたn MacとiPhoneの標準Mailアプリで。 AndroidのGmailでは、テーブル行の間に非常に大きなギャップがあり、私はそれらを制御する方法を見つけることができません。もちろん、私はいくつかの調査を行い、多くの他の情報源の中でherehereと討論された勧告に終わった。書式設定の問題はGoogle Forumsにあります。 Some Peopleは、Outlookで追加された特定のCSSクラスMsoNormalに分解することができましたが、それらはすべてかなり古く、提案は私のためにうまくいかないようです。私はたくさんのものを試してみましたが、3つの異なるバージョンのすべてが同じまたは類似の結果をもたらしました。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<style type="text/css"> 
 
     p.MsoNormal { 
 
      margin: 0px !important; 
 
     } 
 
</style> 
 
</head> 
 
<body> 
 
<table class='tbl' style='min-width:300px; font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'> 
 
    <tbody class='tbl_body'> 
 
    <tr class='tbl_tr' style="display: block; white-space: nowrap;"> 
 
     <td class='tbl_td' style="line-height:0; display: inline-block;"><img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top' /></td> 
 
     <!--<td style='width:5px; display: inline-block;'></td>--> 
 
     <td class='tbl_td' style='vertical-align:top; display: inline-block;'> 
 
     <table class='tbl' style='font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'> 
 
      <tbody class='tbl_body'> 
 
      <tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap;'> 
 
       <td class='tbl_td' style="display: inline-block;">Peter Pan<br>Chief Executive Officer<br><b>The Company</b></td> 
 
      </tr> 
 
      <tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap; '> 
 
       <td class='tbl_td' style="display: inline-block;">Reach me at:<br>[email protected]<br>+00 324 244 20</td> 
 
      </tr> 
 
      <tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap;'> 
 
       <td class='tbl_td' style="display: inline-block;">...or visit me at:<br>My Office<br>Office Street Nr.<br>44556 Officetown</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 

 
    </tbody> 
 
</table> 
 
</body> 
 
</html>

:第二は、テーブル内のテーブルを使用し

<table style='font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top; line-height:0;' /> 
 
     </td> 
 
     <td style='width:5px'></td> 
 
     <td style='vertical-align:top;'> 
 
     <div style='font-size: 11px; margin:0px; padding:0px;'> 
 
      Peter Pan<br> 
 
      Chief Executive Officer<br> 
 
      <b>The Company</b> 
 
     </div> 
 
     <div style='font-size: 9px; margin:0px; padding:0px;'> 
 
      Reach me at:<br> 
 
      [email protected]<br> 
 
      +00 324 244 20 
 
     </div> 
 
     <div style='font-size: 9px; margin:0px; padding:0px;'> 
 
      ...or visit me at:<br> 
 
      My Office<br> 
 
      Office Street Nr.<br> 
 
      44556 Officetown 
 
     </div> 
 
     </td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

最初のバージョンでは、テキストを構成するテーブルの内部divを使用し

そして最後に、私は3行にまたがる画像と3×2の表のレイアウトを使用する:Gmailの

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <style type="text/css"> 
 
      p.MsoNormal { 
 
       margin: 0px !important; 
 
      } 
 
    </style> 
 
</head> 
 
<body> 
 
    <table style='font-family:Arial; cellspacing:0; cellpadding:0; border:0; border-collapse: collapse; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'> 
 
    <tbody> 
 
     <tr style='margin:0px; padding:0px;'> 
 
     <td rowspan="3" style='line-height:0'> 
 
      <img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top' /> 
 
     </td> 
 
     <td style='font-size: 11px; margin:0px; padding:0px;'>Peter Pan<br>Chief Executive Officer<br><b>The Company</b></td> 
 
     </tr> 
 
     <tr style='margin:0px; padding:0px;'> 
 
     <td style='font-size: 11px; margin:0px; padding:0px;'>Reach me at:<br>[email protected]<br>+00 324 244 20</td> 
 
     </tr> 
 
     <tr style='margin:0px; padding:0px;'> 
 
     <td style='font-size: 11px; margin:0px; padding:0px;'>...or visit me at:<br>My Office<br>Office Street Nr.<br>44556 Officetown</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body>

テーブルアプローチの結果は次のように幾分見える:

Table Layout

このアプローチは多少このようになります:

Div Layout

表示されているように、余白、パディング、セルスペースなどはありませんが、テキストボックスの間に大きなギャップがあります。

私はCSSを多用していましたが、解決策はありませんでした。

誰かが助けてくれることを願っています。

よろしく、すべての マルクス

答えて

0

まず、あなたはあなたの頭の部分に<meta name="viewport" content="width=device-width" />を使用しようとしましたか?

その後、また、あなたの<td>line-heightを減らす、または1つの<td>マークアップですべての情報をラップし、その中にいくつかの<br>休憩を入れしようとしましたか?

希望すると助かります。

チャアンプイ。

関連する問題