這種模式：
<img src="path/to/image.png" width="420" height="130" style="display: block; border: none;">
已經變得普遍，現在它是一種最佳實踐。我看到這是每篇文章和每個專案。
如果我理解正確的話，display: block;它被用來洗掉影像下由于<img>默認情況下與基線對齊而導致的空白空間的幾個像素。
但是為什么不使用vertical-align: top;呢？這在代碼中更直接，并且display在回應性需要屬性時不會引起混淆：
uj5u.com熱心網友回復：
你說得對，vertical-align:top是的替代品display:block的<img>標簽。他們達到了相同的結果。
我通過 Litmus 測驗了桌面應用程式：Apple Mail 13、IBM Notes 10、Outlook 2010、Outlook 2019、Windows 10 Mail、Thunderbird 60；移動客戶端：Android 6 原生、Android 版 Gmail、Gmail IMAP、三星、Android 版 Outlook、iOS 版 Gmail、Outlook iOS、iPhone 13；和網路郵件：Comcast、freenet.de、Gmail 網路郵件、GMX.de、Mail.ru、Outlook.com/Office 365、T-Oline.de、Web.de、Yahoo! 郵件
測驗代碼：
<!DOCTYPE HTML>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head> <!-- START HEAD v4-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<!-- END HEAD -->
<body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">
<!-- START OUTER WRAPPER -->
<center id="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<div style="max-width:600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<table align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;margin:0 auto;width:100%;max-width:600px;">
<!-- END OUTER WRAPPER -->
<tr>
<td bgcolor="#ff0000" style="padding:0;">
<img src="https://via.placeholder.com/120x130?text=nothing" width="120" style="border: none;">
</td>
</tr>
<tr>
<td bgcolor="#00ff00" style="padding:0;">
<img src="https://via.placeholder.com/120x130?text=displayBlock" width="120" style="display:block;border: none;">
</td>
</tr>
<tr>
<td bgcolor="#0000ff" style="padding:0;">
<img src="https://via.placeholder.com/120x130?text=verticalAlignTop" width="120" style="border: none;vertical-align: top">
</td>
</tr>
<!-- START OUTER WRAPPER -->
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
<!-- END OUTER WRAPPER -->
</body>
</html>
預期結果：
All vertical-align:top's displayed as per display:block. On Samsung Mail (Android), each sample (i.e. all variants) had very thin outlines that I couldn't get rid of. This seemed to me to be a different issue, since vertical-align:top had the same tiny outline (not a border or outline) as display:block (and with nothing). Some sort of rendering issue related to Samsung Mail only.
Conclusion: vertical-align:top is a substitute for display:block in the <img> tag.
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312921.html
標籤：电子邮件 html-email
下一篇：有沒有辦法從瀏覽器發送電子郵件？