我正在為我們公司設計一個簽名。除了移動 Outlook（iOS 和 Android）之外，我在所有經過測驗的電子郵件客戶端（iOS/macOS 郵件、Outlook 桌面/網路上）中都可以使用它。問題是某些影像太小，即使明確設定了寬度/高度。
所有影像的大小都是樣式中設定的最終大小的兩倍（以適應高 DPI 螢屏）。根據我的研究，如果它是 DPI 問題，它不僅在移動 Outlook 客戶端中，而且我可能是錯的。
預期結果（出現在所有其他經過測驗的電子郵件客戶端中）：
Outlook 移動版（iOS 和 Android）中的結果 — 特別是紅色影像下的社交圖示：
下面的 HTML 僅用于左側的品牌部分，并被剝離為“基本要素”。希望仍然應該對我正在嘗試做的事情有所了解，但如果我需要包含更多內容，請告訴我。
<table style="width: 144px; float: left;">
<tbody>
<!--? logo -->
<tr>
<td>
<a href="...">
<img src="..." width="144" height="60" style="height:60px; width:144px;">
</a>
</td>
</tr>
<!--? vertical spacer -->
<tr><td style="height: 1px;"></td></tr>
<tr>
<td>
<table style="width: 144px;">
<tbody>
<!--? all the cells in this row add up to the same width above, 144px -->
<!--? (5 * 28) (4 * 1) = 144 -->
<tr>
<!--? facebook -->
<td>
<a href="...">
<img src="..." width="28" height="28" style="height:28px; width:28px">
</a>
</td>
<!--? horizontal spacer -->
<td style="width:1px;" width="1"></td>
<!--? same code as above, skipped for brevity -->
<!--? twitter-->
<!--? horizontal spacer -->
<!--? linkedin -->
<!--? horizontal spacer -->
<!--? youtube -->
<!--? horizontal spacer -->
<!--? instagram -->
<!--? horizontal spacer -->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
關于如何使 Outlook 移動版看起來像其他所有電子郵件客戶端的任何想法？
uj5u.com熱心網友回復：
我沒有可以指出的任何明確的檔案或錯誤跟蹤器，但我相信 Outlook 移動版將float:屬性視為行內塊樣式 — 即它嘗試自動縮小到內容，可能過于熱心。
在表格容器元素上明確設定高度為我解決了這個問題：
<table style="width: 144px; height: 89px; float: left;">
<!--? logo -->
<!--? vertical spacer -->
<table style="width: 144px; height: 28px;">
<!--? social -->
</table>
</table>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/472961.html