此电子邮件中 Apple 邮件 IOS 16 的 CSS 问题
问题描述 投票：0回答：2
我已经在这个邮件程序上工作了几个月 - 我不是编码员，但能够使用一些预先设计的模板并添加 Outlook、gmail 和 Apple 邮件的附加要求。然而，当我去测试邮件程序时，它在移动苹果邮件上显示如下
我觉得我已经尝试了一切来解决这个问题。我在下面包含了我的代码。如果有人有关于如何解决这个问题的想法 - 我洗耳恭听！该代码是在 Dreamwaver 中创建的，然后转移到我们的 CRM 系统。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-UA-compatible" content="IE=edge">
<title>EmailTemplate-Responsive</title>
</head>
<style>
{-webkit-text-size-adjust: none}
</style>
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode: bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Another work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
color: inherit !important;
}
</style>
<style type="text/css">
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
/* Media Queries */
@media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid,
.fluid-centered {
max-width: 100% !important;
height: 170px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* And center justify these ones. */
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: inline !important;
width: 33.3% !important;
max-width: 100% !important;
direction: ltr !important;
}
.stack-text-column-center {
display: inline !important;
width: 50% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: left !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: left !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
p.caption {
position: absolute !important;
bottom: 0px !important;
margin-left: auto !important;
margin-right: auto !important;
left: 0 !important;
right: 0 !important;
text-align: center !important;
}
}
</style>
<style type="text/css">
#outlook body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 0px;
}
li {
text-align: -webkit-match-parent !important;
display: list-item important;
}
ul {
margin-top: 0px !important;
margin-bottom: 0 !important;
}
p.bullet {
Margin: 5px 0px 0px 10px !important;
text-indent: -10px !important;
}
</style>
<body bgcolor="#e0e0e0" width="100%" style="margin: 0;" yahoo="yahoo">
<table bgcolor="#e0e0e0" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
<tr>
<td>
<center style="width: 100%;">
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
Fall 2022 update from Castle Peak Associates . </div>
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 20px 0; text-align: center; border:0"> <img src="https://castlepeakassociates.com/wp-content/uploads/2021/06/Castle-Peak-Associates-Logo.png">
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#FEF4EA" width="600" class="email-container">
<tr>
<td class="full-width-image"><img src="https://castlepeakassociates.com/wp-content/uploads/2022/12/4e87912b-27f6-440b-9a83-d44547f3cffd.png" width="600" alt="alt_text" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;"></td>
</tr>
<tr>
<td background="https://castlepeakassociates.com/wp-content/uploads/2022/09/CPA-page-bg-600px-.png" backgound-repeat:no-repeat background-size: contain style="padding-bottom: 10px;padding-left: 10px;padding-right:10px; text-align: center; font-family: sans-serif; font-size: 18px; mso-height-rule: exactly; line-height: 20px; color: #555555;background-color:#FEF4EA;">
<p style="font-size: 18px;padding:20px 0px 10px 0px;">What is on your horizon?
</p><p style="font-size: 13px;padding-bottom: 16px;">The Insurance industry is no stranger
to uncertainty. How are you affected by current events? What are the business
priorities and opportunities moving forward? Castle Peak Associates have decades of
experience helping Insurance companies navigate in challenging terrain. We conduct
strategic assesments, provide recommendations based on real world experience and
have a succesful track record of helping our clients implement our recommendations
and achieve their goals.</p>
<p style="font-size: 13px;padding-bottom: 16px;">We specialize in investment systems and
managment consulting for insurance companies. We understand what drives investment
decisions, what is required for regulatory and financial reporting and we understand
the complex network of platforms, data and processes that link the two.</p>
<p style="font-size: 13px;padding-bottom: 16px;"> Find out how we can help you and your
business succeed.</p>
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
<tr style="background-color:#003a70 !important">
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="mailto:[email protected]" style="background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
Contact Us
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color: #FEF4EA; !important">
<td align="center" style="padding: 10px 10px 10px 10px; background-color:#FEF4EA">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" valign="top" width="33.33%" class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="bottom" width="170" height="170" style="min-width: 100%; min-height: 100%; align:center; position:relative; text-align:center; font-family:sans-serif;font-weight: bold;font-size: 22px; color:#000099;padding: 0px 10px 10px 10px;" class="center">
<img src="https://castlepeakassociates.com/wp-content/uploads/2022/12/Castle-Peak-Associates-Logo-1-1-e1671466265911.png">
</td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding:20px 10px 10px 10px; text-align: center;" class="stack-text-column-center center-on-narrow">
<p style="font-size: 16px;padding:0px 0px 10px 0px;">WHO...ARE
OUR CLIENTS?</p>
<p style="font-size: 15px;padding:0px 0px 10px 0px;">We work
with institutional asset owners and managers including:</p>
<p class="bullet">• Insurers</p>
<p class="bullet">• Pension Funds</p>
<p class="bullet">• Banks</p>
<p class="bullet">• Advisors</p>
<p class="bullet">• Service Providers</p>
<p class="bullet">• Fund Administrators</p>
<p style="padding:10px 0px 0px 0px;">Much of our recent work has
been with large, complex insurers with investment mandates
extending into alternatives, mortgage loans, private credit
and derivatives.</p>
</td>
</tr>
</table>
</td>
</tr></table>
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #888888;">
<webversion style="color:#cccccc; text-decoration:underline; font-weight: bold;">
View as a Web Page</webversion>
<br>
<br>
Castle Peak Associates, LP<br>
<span class="mobile-link--footer">2020 N Main St., Unit 239 Los Angeles,
CA</span> <br>
<br>
<unsubscribe style="color:#888888; text-decoration:underline;">unsubscribe
</unsubscribe>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>type here
我尝试过切换标题标签，搜索是否缺少结束标签，并尽力确保所有媒体查询都匹配。
2个回答
0
投票
投票
向图像添加
alt=""<img
src="https://castlepeakassociates.com/wp-content/uploads/2022/12/Castle-Peak-Associates-Logo-1-1-e1671466265911.png"
alt="Your image description"
>
0
投票
投票
您的设计非常简单，并且对于您在代码中使用的大量样式和技巧来说是标准的。这就是你问题的根源。简化。
最新问题
- 如何从ControlValueAccessor获取FormControl实例
- React Native 水平和垂直滚动
- 如何处理多参数类型类的函数，而不需要类型类的每种类型？
- 函数 monad 递归调用中 `TraceM` 的输出混乱
- Docker Desktop 内的本地 Hardhat 实例上的 ERC20 可升级合约部署超时问题
- 将不同类别的商品分组以获得最大折扣 - java
- 标题：Firebase 身份验证错误：尽管 SHA1/SHA256 配置正确，但仍缺少客户端标识符 [auth/missing-client-identifier]
- 允许 BaseModel pydantic 的位置参数
- Excel 图表：按类别为数据标签着色 - 列
- 使用类型推断函数仅返回特定值？
- Jira 状态/列 API 问题
- 时间数据与格式不匹配，即使它们相同
- 使用 Pusher 库时缺少类 org.slf4j.impl.StaticLoggerBinder （引用自：void org.slf4j.LoggerFactory.bind() 和其他 3 个上下文）
- 如何将信号添加到expo项目
- 如何在bigQuery 4中返回会话id和订单id
- 减小 Jetpack Compose Material 2 中的 imePadding() 大小
- EF Core 中的获取迁移
- 使用 Git LFS：本地存储库的最佳实践是什么？
- 在 Redux-saga 中使用 Fetch 发布表单数据
- div 中的图像溢出
© www.soinside.com 2019 - 2024. All rights reserved.