我正在尝试通过以下结构创建HTML签名：
TEXT-1 TEXT-2
TEXT TEXT
TEXT TEXT
PICTURE PICTURE PICTURE PICTURE
TEXT-1和TEXT-2的面积应分别为50％。
在iOS中-它可以正常运行，在Android上，结构如下所示：
TEXT-1 TEXT-2
TEXT TEXT
TEXT TEXT
PICTURE PICTURE PICTURE PICTURE
我正在使用以下代码：
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<style type="text/css">
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
direction:ltr;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
img {
-ms-interpolation-mode:bicubic;
}
*[x-apple-data-detectors], /* iOS */
.x-gmail-data-detectors, /* Gmail */
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.a6S {
display: none !important;
opacity: 0.01 !important;
}
img.g-img + div {
display:none !important;
}
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
tr {
width: 100% !important;
}
td {
color:#000;
}
.left {
border-bottom: 5px solid #FEC025;
}
.right {
}
.bottom {
background: #DEDEE1;
}
.Website {
letter-spacing: 3px;
}
.Phone {
letter-spacing: 3px;
}
.Email {
letter-spacing: 3px;
}
.Address {
letter-spacing: 3px;
}
</style>
</head>
<body style="margin: 0; mso-line-height-rule: exactly;">
<!--[if gte mso]>
<table cellspacing="0" dir="ltr" width="100%"><tr><td dir="ltr" style="font-family: Arial; font-size: 10pt; direction: ltr; color: #fff; width: 500px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div dir="ltr" style="float: left; font-family: Arial; font-size: 12pt; direction: ltr; color: #000; width: 500px; height: 100px; padding: 3px; vertical-align: top">
TEXT-1<br />
<strong>TEXT<br />
TEXT</strong>
</div>
<!--[if gte mso]>
</td><td dir="ltr" style="font-family: Arial; font-size: 10pt; direction: ltr; color: #fff; width: 500px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div dir="ltr" style="float: left; font-family: Arial; font-size: 12pt; direction: ltr; text-align: right; color: #000; width: 500px; height: 100px; padding: 3px; vertical-align: top">
<div class="Website">TEXT-2</div>
<div class="Phone">TEXT</div>
<div class="Email">TEXT</div>
<div class="Address">TEXT</div>
</div>
<!--[if gte mso]>
</td></tr></table>
<![endif]-->
<!--[if gte mso]>
<table cellspacing="0" width="100%"><tr><td class="mobile" style="font-family: Arial; font-size: 10pt; color: #fff; width: 200px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div class="mobile" style="float: left; font-family: Arial; font-size: 12pt; text-align: center; color: #000; width: 200px; height: 100px; padding: 3px; vertical-align: top">
<img style="width: 198px !important;text-align: center;" src="logo.jpg" />
</div>
<!--[if gte mso]>
</td><td class="mobile" style="font-family: Arial; font-size: 10pt; color: #fff; width: 25%; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div class="mobile" style="float: left; font-family: Arial; font-size: 12pt; text-align: center; color: #000; width: 200px; height: 100px; padding: 3px; vertical-align: top">
<img src="img1.png" /> <br />
Personalized Service
</div>
<div class="mobile-only"></div><!--[if gte mso]>
</td><div class="mobile-only"></div><td class="mobile" style="clear: both; font-family: Arial; font-size: 10pt; color: #fff; width: 25%; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div class="mobile" style="clear: both; float: left; font-family: Arial; text-align: center; font-size: 10pt; color: #000; width: 200px; height: 100px; padding: 3px; vertical-align: top">
<img src="img2.png" /> <br />
Extra Flexibility
</div>
<!--[if gte mso]>
</td><td class="mobile" style="font-family: Arial; font-size: 10pt; color: #fff; width: 25%; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div class="mobile" style="float: left; font-family: Arial; font-size: 12pt; text-align: center; color: #000; width: 200px; height: 100px; padding: 3px; vertical-align: top">
<img src="img3.png" /> <br />
Areas of Excellence<!--[if gte mso]>
</td></tr></table>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr class="bottom">
<td width="100%">some text</td>
</tr>
</table>
</body>
</html>