Apple Mail上的此电子邮件中的CSS出现问题
问题描述：
我目前正在通过Mailchimp为我的客户/我的博客追随者发布新闻稿，并且出现了一个问题。当电子邮件发送给任何使用默认iPhone电子邮件客户端的人时，图像会出现歪斜，如this。Apple Mail上的此电子邮件中的CSS出现问题
我在一个单独的iOS客户端（Airmail）上检查了电子邮件，它看起来很好。它在Mailchimp的预览中也很好看，所以我猜这与苹果的默认客户端有关。有任何想法吗？
这里的HTML和内嵌CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://gallery.mailchimp.com/70186f0a9db1e3d7b932ad84d/files/1e71bcad-6a84-4265-bb54-84188d0d027f/email1sheet.04.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="ult">
<div class="header">
<img src="https://gallery.mailchimp.com/70186f0a9db1e3d7b932ad84d/images/0a53d223-c847-49f6-97c3-2119430d3dce.png" alt="colorful banner" style="max-width: 100%">
</div>
<div class="body-div">
<p>Hi and welcome to my email list! Thanks for joining. This is just a simple welcome email, but let me tell you a little bit about myself. My name is Mason and I'm a graphic designer from Chicago, IL. I love good music, coffee, video games and, of course, design.
<br>
<br>
I’d like to thank you for joining by sharing some content that I think you might enjoy:</p>
<h1>Some Cool Resources</h1>
<p><b>Looking For Stock Photos?</b>
<br>Stock photos are expensive, for sure. I get it. I don’t want to pay for them either. Well, it turns out we’re all in luck. <a href="https://stocksnap.io">Stocksnap</a> is a great site that gives away a ton of high quality, high-res images for free. The pictures here are actually really good. Even as a designer, I’ll admit that I use some of them myself. Check the site out! No need to thank me.</p>
<br>
<p><b>Want To See Some Cool Design Work?</b>
<br>Try browsing <a href="https://dribbble.com">Dribbble</a> sometime. It’s a great site where you can see some very high quality work. Only users who have been invited to the site are allowed to post their work, so all the posts are guaranteed to be somewhat good, at the very least.<br><br>
If you want, give me a follow too! My Dribbble page is <a href="https://dribbble.com/MasonW">here</a>.</p>
<br>
<p><b>Need a New Podcast?</b>
<br>If you haven’t listened to <a href="http://99percentinvisible.org">99% Invisible</a> yet, you definitely need to check it out. This podcast is all about the various kinds of design we come across in life. It’ll help you look at the things you take for granted in life in a whole new way. Each episode is incredibly interesting in its own way. Also, the host, Roman Mars, exudes real passion and has one of the most relaxing voices of any podcast host I know. What’s more… episodes are usually only around 20 - 30 minutes long which is often times the perfect length for your commute to work or for a nice walk.</p>
<h1>Content From Yours Truly</h1>
<p>Thinking of working with a designer sometime soon? Check out a recent blog post of mine where I talk about the The Do’s and Don’ts of Working With a Designer. Design can be a misunderstood field and hopefully this will give you a bit of insight.</p>
<br>
<center>
<div class="pic">
<a href="https://medium.com/@mason_weis/the-dos-and-donts-of-working-with-a-designer-on-your-next-project-9f322a53b8e"><img src="https://cdn-images-1.medium.com/max/1000/1*x_BVDlaWwsD0V5PdthkkkA.png" alt="Cover Art and link for my blog post" style="border-top-right-radius: 5px; border-top-left-radius: 5px; max-width: 100%; max-height: 100%; display: block;"></a>
<div class="card">Click above to give it a read!</div>
</div>
</center>
<br>
<h1>Until Next Time!</h1>
<p>Thanks again for subscribing! I’ll only be sending emails once a month, so don’t expect spam or anything like that. Feel free to reach out to me any time as well - my email is [email protected]
Thanks!
<center>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
<tr>
<td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;">
This email was sent to <a href="mailto:*|EMAIL|*" target="_blank" style="color:#404040 !important;">*|EMAIL|*</a>
<br>
<a href="*|ABOUT_LIST|*" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a> <a href="*|UNSUB|*" style="color:#404040 !important;">unsubscribe from this list</a> <a href="*|UPDATE_PROFILE|*" style="color:#404040 !important;">update subscription preferences</a>
<br>
*|LIST:ADDRESSLINE|*
<br>
<br>
*|REWARDS|*
</td>
</tr>
</table>
</td>
</tr>
</table>
<style type="text/css">
@media only screen and (max-width: 480px){
table#canspamBar td{font-size:14px !important;}
table#canspamBar td a{display:block !important; margin-top:10px !important;}
}
</style>
</center></p>
</div>
</div>
</body>
</html>
答
如果你给宽度为100％，那么不编码最大高度或高度为100％。高度应该被编码为自动。这将意味着如果宽度是100％，那么高度就意味着它将成比例。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://gallery.mailchimp.com/70186f0a9db1e3d7b932ad84d/files/1e71bcad-6a84-4265-bb54-84188d0d027f/email1sheet.04.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="ult">
<div class="header">
<img src="https://gallery.mailchimp.com/70186f0a9db1e3d7b932ad84d/images/0a53d223-c847-49f6-97c3-2119430d3dce.png" alt="colorful banner" style="max-width: 100%">
</div>
<div class="body-div">
<p>Hi and welcome to my email list! Thanks for joining. This is just a simple welcome email, but let me tell you a little bit about myself. My name is Mason and I'm a graphic designer from Chicago, IL. I love good music, coffee, video games and, of course, design.
<br>
<br>
I’d like to thank you for joining by sharing some content that I think you might enjoy:</p>
<h1>Some Cool Resources</h1>
<p><b>Looking For Stock Photos?</b>
<br>Stock photos are expensive, for sure. I get it. I don’t want to pay for them either. Well, it turns out we’re all in luck. <a href="https://stocksnap.io">Stocksnap</a> is a great site that gives away a ton of high quality, high-res images for free. The pictures here are actually really good. Even as a designer, I’ll admit that I use some of them myself. Check the site out! No need to thank me.</p>
<br>
<p><b>Want To See Some Cool Design Work?</b>
<br>Try browsing <a href="https://dribbble.com">Dribbble</a> sometime. It’s a great site where you can see some very high quality work. Only users who have been invited to the site are allowed to post their work, so all the posts are guaranteed to be somewhat good, at the very least.<br><br>
If you want, give me a follow too! My Dribbble page is <a href="https://dribbble.com/MasonW">here</a>.</p>
<br>
<p><b>Need a New Podcast?</b>
<br>If you haven’t listened to <a href="http://99percentinvisible.org">99% Invisible</a> yet, you definitely need to check it out. This podcast is all about the various kinds of design we come across in life. It’ll help you look at the things you take for granted in life in a whole new way. Each episode is incredibly interesting in its own way. Also, the host, Roman Mars, exudes real passion and has one of the most relaxing voices of any podcast host I know. What’s more… episodes are usually only around 20 - 30 minutes long which is often times the perfect length for your commute to work or for a nice walk.</p>
<h1>Content From Yours Truly</h1>
<p>Thinking of working with a designer sometime soon? Check out a recent blog post of mine where I talk about the The Do’s and Don’ts of Working With a Designer. Design can be a misunderstood field and hopefully this will give you a bit of insight.</p>
<br>
<center>
<div class="pic">
<a href="https://medium.com/@mason_weis/the-dos-and-donts-of-working-with-a-designer-on-your-next-project-9f322a53b8e"><img src="https://cdn-images-1.medium.com/max/1000/1*x_BVDlaWwsD0V5PdthkkkA.png" alt="Cover Art and link for my blog post" style="border-top-right-radius: 5px; border-top-left-radius: 5px; max-width: 100%; height:auto; display: block;"></a>
<div class="card">Click above to give it a read!</div>
</div>
</center>
<br>
<h1>Until Next Time!</h1>
<p>Thanks again for subscribing! I’ll only be sending emails once a month, so don’t expect spam or anything like that. Feel free to reach out to me any time as well - my email is [email protected]
Thanks!
<center>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
<tr>
<td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;">
This email was sent to <a href="mailto:*|EMAIL|*" target="_blank" style="color:#404040 !important;">*|EMAIL|*</a>
<br>
<a href="*|ABOUT_LIST|*" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a> <a href="*|UNSUB|*" style="color:#404040 !important;">unsubscribe from this list</a> <a href="*|UPDATE_PROFILE|*" style="color:#404040 !important;">update subscription preferences</a>
<br>
*|LIST:ADDRESSLINE|*
<br>
<br>
*|REWARDS|*
</td>
</tr>
</table>
</td>
</tr>
</table>
<style type="text/css">
@media only screen and (max-width: 480px){
table#canspamBar td{font-size:14px !important;}
table#canspamBar td a{display:block !important; margin-top:10px !important;}
}
</style>
</center></p>
</div>
</div>
</body>
</html>给它去，让我知道，如果它的工作原理。
跨多个视图调整图像总是很痛苦。如果我是你，我会结合文本和图像来制作一张图片并使用它。 –
总是做宽度100％和高度自动或高度100％和宽度自动，因此图像是成比例的。 – Syfer