作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试为电子邮件创建以下设计:
<table align="center" width="600" border="0" cellpadding="10" cellspacing="0">
<tr bgcolor="pink">
<td align="left" width="50%" height="40px">
Left Column Text
</td>
<td align="right" width="50%" height="40px">
Right Column Text
</td>
</tr>
</table>
但是,例如将上表从 Outlook 转发到 Gmail 时,它不起作用。当我从 Outlook 转发这封电子邮件时,它会向 <td>
添加额外的元素。 s:
<td align="left" width="50%" height="40px">
<p align="right" style="text-align:right;">
<span dir="RTL"> Some Text </span>
</p>
</td>
它使两列上的文本都向右对齐。为什么?
这是从 Outlook 转发到 Gmail 时的样子:(请注意,在下面的示例中,我手动将左列更改为 align="right"
只是为了模仿该行为)
<table align="center" width="600" border="0" cellpadding="10" cellspacing="0">
<tr bgcolor="pink">
<td align="right" width="50%" height="40px">
Left Column Text
</td>
<td align="right" width="50%" height="40px">
Right Column Text
</td>
</tr>
</table>
最佳答案
在 Outlook 中,您必须使用静态像素。解决方案是专门为 Outlook 创建一个内部表,该表不会向其他电子邮件客户端显示。您将在下面找到电子邮件客户端的起点。
对所有元素进行内联样式(在元素标记中)非常重要,因为某些电子邮件客户端会删除 <head>
中的样式。部分。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="border:none;" xmlns:v="urn:schemas-microsoft-com:vml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title></title>
<style type="text/css">
.ExternalClass { width: 100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
#outlook a { padding: 0px; }
</style>
<!--[if (mso)]>
<style type="text/css">
td { font-family: helvetica, arial, sans-serif !important; }
</style>
<![endif]-->
<base target=_blank>
</head>
<body bgcolor="#ffffff" style=" -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; margin:0; padding:0; width:100%" width="100%">
<table style="-premailer-cellpadding:0; -premailer-cellspacing:0; border-collapse:collapse; border-spacing:0; font-family:Helvetica, Arial, sans-serif; font-weight:300; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0" cellpadding="0" cellspacing="0">
<tr>
<td style="border-spacing:0; margin:0; padding:0 20px">
<!--[if (mso)]>
<table id="outlook" width="474" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; table-width:fixed;" align="center">
<tr>
<td class="outlooktd" style="width:474px !important;">
<![endif]-->
<table width="100%" id="mastbody" border="0" cellspacing="0" cellpadding="0" dir="ltr" style=" -premailer-cellpadding:0; -premailer-cellspacing:0; border-collapse:collapse; border-spacing:0; color:#444; font-family:Helvetica, Arial, sans-serif; font-weight:300; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0">
<tr>
<td bgcolor="#ffffff" style="border-spacing:0; margin:0; padding:0">
</td>
<!-- here your email content -->
<tr>
<td bgcolor="#ffffff" style="border-spacing:0; margin:0; padding:0">
</td>
</table>
<!--[if (mso)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
关于html - 如何创建与所有电子邮件提供商兼容的左侧文本和右侧文本的行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/75879673/
我在前几天的测验中遇到了以下问题。 Consider the code fragment (assumed to be in a program in which all variables are
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
我刚开始接触 Objective-C,一般来说是 C,所以我想这也是一个 C 问题。它更像是一个为什么的问题,而不是一个如何做的问题问题。 我注意到,在除以两个整数时,小数部分向下舍入为 0,即使结果
我是一名优秀的程序员,十分优秀!