我正在使用此模板：https ://mailbakery.com/template-store/product/basic-free-html-email-template/用于電子郵件通訊。我在移動設備上的推薦中遇到重疊文本的問題。我必須有不在 jsfiddle 中的報價影像，但請使用您的想象力，哈哈。我嘗試添加空格：正常、固定寬度和分詞，但沒有。表格有邊框折疊：邊框。
這是 jsFiddle：https ://jsfiddle.net/z5jybrda/
/* Linked Styles */
body {
padding: 0 !important;
margin: 0 !important;
display: block !important;
min-width: 100% !important;
width: 100% !important;
background: #ffffff;
-webkit-text-size-adjust: none;
}
a {
color: #0000ee;
text-decoration: none;
}
p {
padding: 0 !important;
margin: 0 !important;
}
/* Mobile styles */
@media only screen and (max-device-width: 480px),
only screen and (max-width: 480px) {
.table_wrapper {
width: 95%;
}
.mobile-full-width {
width: 100% !important;
}
.mobile-shell {
width: 100% !important;
min-width: 100% !important;
}
.text-header,
.m-center {
text-align: center !important;
}
.m-font-15 {
font-size: 15px !important;
}
.center {
margin: 0 auto !important;
}
.container {
padding: 20px 10px !important;
}
.td {
width: 100% !important;
min-width: 100% !important;
}
.m-br-15 {
height: 15px !important;
}
.p30-15 {
padding: 30px 15px !important;
}
.p0-15-30 {
padding: 0px 15px 30px 15px !important;
}
.p0-15 {
padding: 0px 15px !important;
}
.pb-30 {
padding-bottom: 30px !important;
}
.mpb30 {
padding-bottom: 30px !important;
}
.mpb15 {
padding-bottom: 15px !important;
}
.m-td,
.m-hide {
display: none !important;
width: 0 !important;
height: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
min-height: 0 !important;
}
.column,
.column-dir,
.column-top,
.column-empty,
.column-empty2,
.column-dir-top {
float: left !important;
width: 100% !important;
display: block !important;
}
.column-empty {
padding-bottom: 30px !important;
}
.column-empty2 {
padding-bottom: 10px !important;
}
.content-spacing {
width: 15px !important;
}
}
@media only screen and (max-width: 310px) {
.button {
width: 195px !important;
}
img.quote {
height: 22px;
width: auto;
}
td.quote {
width: 50px !important;
}
} <!-- WRAPPER -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background: #f4f5f6">
<tr>
<td align="center">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="
width: 650px;
min-width: 650px;
font-size: 0pt;
line-height: 0pt;
padding: 0;
margin: 0;
font-weight: normal;
">
<!-- SPACER -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="30"></td>
</tr>
</table>
<!-- TESTIMONIAL -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background: #877454;">
<tr>
<td height="20"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td width="20"></td>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td valign="top" width="70" class="quote">
<div><img src="./Newsletters/Images/colon.png" width="50" height="34" alt="quotation" style="display: block;" border="0" class="quote" />
</div>
</td>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td height="10"></td>
</tr>
<tr>
<td style="font-size: 18px; color:#ffffff; font-family: 'Open Sans',Arial, sans-serif; font-style: italic; line-height: 1.5; " class="m-font-15">Thank you for your excellent leadership and support over the last year. We all greatly appreciate your efforts to steer us all in the right direction.
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
<tr>
<td style="font-size: 16px; color:#ffffff; font-family: 'Open Sans',Arial, sans-serif; ">
<p>
- John Doe recognizing <span style="text-decoration: underline;">John Doe</span>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<td width="30"></td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40"></td>
</tr>
</table>
<!-- END TESTIMONIAL -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>我很感激任何幫助
uj5u.com熱心網友回復：
修改中的行高<p>可以解決問題（在您添加為的代碼中定義line-height:0，這會導致問題）
<p> - John Doe recognizing <span style="text-decoration: underline;">John Doe</span> </p>
將是
<p style="line-height:1em;"> .... </p>
uj5u.com熱心網友回復：
好吧，這是我最喜歡的 HTML 表格問題之一<td>，如果您像這樣更改 td，那么發生在您身上的事情是由于 td 中的空間不足：
<td style="font-size: 16px; color:#ffffff; font-family: 'Open Sans',Arial, sans-serif; line-height: 22px;">
解決了 ;）
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/428124.html