0
我在使用移動設備上的像素舍入時遇到了3列圖像的問題。HTML電子郵件：移動設備上的3列圖像 - 舍入問題
在桌面當然圖像只顯示各爲200像素寬，在移動，我將它們設置爲33％（我做了33.334％，以避免大的差距，以影像的右）
但是，我仍然有一個單一像素的空白在右邊，我無法在手機上脫身。 Here's the pixel I'm talking about
任何人可以幫忙嗎？
<style type="text/css">a {
text-decoration: none !important;
color: #666666;
}
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
width: auto !important;
background: #ffffff;
}
@media screen and (max-width: 600px) {
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
width: auto !important;
}
.rsd33,
td.rsd33 img {
width: 33.334%!important;
height: auto!important;
}
.rsd,
td.rsd img {
width: 100%!important;
height: auto!important;
}
}
</style><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF" class="rsd">
<tbody>
<tr>
<td class="rsd">
<!--[if gte mso 9]>
\t \t \t <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
\t \t \t \t <tr valign="top">
\t \t \t \t \t <td>
\t \t \t \t \t <![endif]-->
<table width="200" border="0" cellpadding="0" cellspacing="0" align="left" class="rsd33">
<tbody>
<tr>
<td class="rsd"><img src="http://image.e.bianco.com/lib/fe8a13727261017972/m/1/200x100.gif" width="200" height="" align="center" border="0" link="" /></td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
\t \t \t \t \t </td>
\t \t \t \t \t <td>
\t \t \t \t \t <![endif]-->
<table width="200" border="0" cellpadding="0" cellspacing="0" align="left" class="rsd33">
<tbody>
<tr>
<td class="rsd"><img src="http://image.e.bianco.com/lib/fe8a13727261017972/m/1/200x100.gif" width="200" height="" align="center" border="0" link="" /></td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
\t \t \t \t \t </td>
\t \t \t \t \t <td>
\t \t \t \t \t <![endif]-->
<table width="200" border="0" cellpadding="0" cellspacing="0" align="left" class="rsd33">
<tbody>
<tr>
<td class="rsd"><img src="http://image.e.bianco.com/lib/fe8a13727261017972/m/1/200x100.gif" width="200" height="" align="center" border="0" link="" /></td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t </table>
\t \t \t <![endif]-->
</td>
</tr>
</tbody>
</table>
</body>
</html>
感謝您的解決方案。 我只是不確定我真的很喜歡流體混合方法。我已經看了很多，但我覺得有限制。 我看不到，我如何輕鬆地隱藏移動設備上的對象或更改移動設備上的字體大小或填充，但不能在桌面上進行更改。等等。？ 此外，我還喜歡使用帶有編碼空間的圖像（例如，在彼此之間也可以在移動設備上顯示10張圖像的3張圖像） 使用百分比的流體混合方法可能嗎？ – Nikolai907
由於Gmail現在支持媒體查詢，任何事情都是可能的。如果編碼正確，你的設計應該能夠做到。編碼混合方法時有一個技巧。借用左右邊距的空格。例如，如果側邊距爲30px，則您的外邊距將使用10px塊，而內側塊將使用20px邊距。這樣，當代碼響應你的手機和你的10像素塊堆棧20px的餘量。希望這是有道理的。 – Syfer
我不使用百分比，我使用最大寬度爲100％的寬度。外部表由Outlook條件語句，類和最大寬度表控制。 – Syfer