Mac OSからOutlook 2017で作成されたHTML署名を表示するとき、私はAndroid上のGMail Appの奇妙な動作に直面しています。GmailのアプリケーションのOutlook HTML署名:の間の要素
まず第一に、ここで私がやったことです:
- 私は署名欄にブラウザウィンドウからコンテンツをコピーしたシンプルなテーブルレイアウトでHTML署名を作成し、ブラウザ
- にオープンOutlookで( - >設定 - 展望>シグネチャー)
- 私は今、署名は、基本的には、ブラウザでOutlook Oを正常に見えるコンテンツ
を貼り付けた後、元の書式を保持しましたn MacとiPhoneの標準Mailアプリで。 AndroidのGmailでは、テーブル行の間に非常に大きなギャップがあり、私はそれらを制御する方法を見つけることができません。もちろん、私はいくつかの調査を行い、多くの他の情報源の中でhereとhereと討論された勧告に終わった。書式設定の問題は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>
テーブルアプローチの結果は次のように幾分見える:
このアプローチは多少このようになります:
表示されているように、余白、パディング、セルスペースなどはありませんが、テキストボックスの間に大きなギャップがあります。
私はCSSを多用していましたが、解決策はありませんでした。
誰かが助けてくれることを願っています。
よろしく、すべての マルクス