0
私はHTMLニュースレターで多くのブラウザの不調を経験しています。コードを調べるだけで診断できる目立つ問題はありますか？たとえば、ニュースレターの高さは、コンテンツの高さをはるかに超えています。これは1つの特定の問題に過ぎません。MailChimp HTMLニュースレターでブラウザ間の問題を修正する方法を教えてください。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Facebook sharing information tags -->
<meta property="og:title" content="*|MC:SUBJECT|*" />
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
/* Reset Styles */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table td{border-collapse:collapse;}
#backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
body, #backgroundTable{
background-color:#FAFAFA;
font-family: Arial;
}
#templateContainer{
border: 1px solid #DDDDDD;
}
p {
color: #5a5a5a;
}
a {
color: #8b8b8b;
}
h1, .h1{
color:#202020;
display:block;
font-family:Arial;
font-size:16px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h2, .h2{
color:#202020;
display:block;
font-family:Arial;
font-size:22px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h3, .h3{
color:#202020;
display:block;
font-family:Arial;
font-size:16px;
font-weight:normal;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h4, .h4{
color:#202020;
display:block;
font-family:Arial;
font-size:22px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
#templatePreheader{
background-color:#FAFAFA;
}
.preheaderContent div{
color:#505050;
font-family:Arial;
font-size:10px;
line-height:100%;
text-align:left;
}
.preheaderContent div a:link, .preheaderContent div a:visited, /* Yahoo! Mail Override */ .preheaderContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
#templateHeader{
background-color:#FFFFFF;
border-bottom:0;
}
.headerContent{
color:#202020;
font-family:Arial;
font-size:34px;
font-weight:bold;
line-height:100%;
padding:0;
text-align:center;
vertical-align:middle;
}
.headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
#headerImage{
height:auto;
max-width:600px;
}
#templateContainer, .bodyContent{
background-color:#FFFFFF;
}
.bodyContent div{
color:#505050;
font-family:Arial;
font-size:14px;
line-height:150%;
text-align:left;
}
.bodyContent div a:link, .bodyContent div a:visited, /* Yahoo! Mail Override */ .bodyContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.bodyContent img{
display:inline;
height:auto;
}
.leftColumnContent{
background-color:#FFFFFF;
}
.leftColumnContent div{
color:#505050;
font-family:Arial;
font-size:14px;
line-height:150%;
text-align:left;
}
.leftColumnContent div a:link, .leftColumnContent div a:visited, /* Yahoo! Mail Override */ .leftColumnContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.leftColumnContent img{
display:inline;
height:auto;
}
.rightColumnContent{
background-color:#FFFFFF;
}
.rightColumnContent div{
color:#505050;
font-family:Arial;
font-size:14px;
line-height:150%;
text-align:left;
}
.rightColumnContent div a:link, .rightColumnContent div a:visited, /* Yahoo! Mail Override */ .rightColumnContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.rightColumnContent img{
display:inline;
height:auto;
}
#templateFooter{
background-color:#FFFFFF;
border-top:0;
}
.footerContent div{
color:#707070;
font-family:Arial;
font-size:12px;
line-height:125%;
text-align:left;
}
.footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.footerContent img{
display:inline;
}
#social{
background-color:#FAFAFA;
border:0;
}
#social div{
text-align:center;
}
#utility{
background-color:#FFFFFF;
border:0;
}
#utility div{
text-align:center;
}
#monkeyRewards img{
max-width:190px;
}
ol {
padding-left: 20px;
}
li {
margin-bottom: 10px;
}
.letter-from-editor {
float: left;
display: inline;
color: #24ae04;
font-size: 22px;
margin-left: 40px;
}
.publication-date {
float: right;
margin-top: 0;
text-transform: uppercase;
margin-right: 20px;
font-size: 12px;
}
td.bodyContent {
padding: 25px;
}
.support {
text-align: center;
color: #24ae04;
font-size: 22px;
margin: 15px 0;
}
.continue-reading {
text-decoration: none;
}
.footer-links {
font-size: 12px;
text-decoration:none;
}
.the-footer {
width: 600px;
text-align: right;
margin:20px 0 50px 0;
}
.all-footer-links {
margin-top: 65px;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
width: 600px;
padding: 15px 0 15px 0;
text-align: right;
font-size: 12px;
color:#e8e8e8;"
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" style="background-color: #000000;color: #FFFFFF;">
<div mc:edit="header_links" style="text-align:center;">
Having trouble viewing this email? <a target="_blank" href="*|ARCHIVE|*" target="_blank">View it in your browser</a>
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader" style="border-bottom:1px solid #e8e8e8;">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- <td valign="top">
<div mc:edit="std_preheader_content">
Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.
</div>
</td> -->
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" style="background-color: #FFFFFF;">
<div mc:edit="message" style="text-align:left; margin:30px auto; width:600px;">
<h1 style="color:#3db0df;">example's Weekly Newsletter</h1>
<p mc:edit="top-header-message" style="width:440px;display:inline;font-size:12px;line-height:140%;">Each week we'll keep you informed about features, products, and service<br>updates. Be sure to go to our <a target="_blank" href="http://www.example.com">website</a> and follow us on <a target="_blank" href="http://www.twitter.com/example">twitter</a> for more<br>frequent news in between.</p>
<img mc:edit="logo-main" style="float:right;margin-top:-55px;" src="logo.png" />
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" style="margin-top:50px;">
<tr>
<td align="center" valign="top">
<h1 mc:edit="from-the-editor" class="letter-from-editor">A letter from the editor</h1>
<p mc:edit="publication-date" class="publication-date">March 28, 2012</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
<tr>
<td class="headerContent">
<!-- // Begin Module: Standard Header Image \\ -->
<img src="header.png" style="max-width:600px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
<!-- // End Module: Standard Header Image \\ -->
</td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
<tr>
<td colspan="3" valign="top" class="bodyContent">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%" height="100%">
<tr>
<td valign="top">
<div mc:edit="std_content00">
<h2 class="h2" style="color: #3db0df;">5 Ways To Be Happy Right Now</h2>
<p>Down in the dumps. The Blues. The doldrums. No matter what you call it - sometimes, even if you are the happiest person around, you start to feel like crud.</p>
<p>This week there seems to be a crazy amount of negative info swirling around - whether it's deadly tornados or horrible rhetoric as the Republican primaries heat up (especially negative for women on this one, but I'll try to not get political!) And, I guess some of this finally got to me...so I tried everything I could to get myself out of my funk.</p>
<h3 class="h3" style="color: #3db0df;"><em>Here were the 5 things that worked the best:</em></h3>
<ol>
<li>I did a <strong>20 minute workout</strong> (mostly going for brisk walks) right after I woke up in the morning - before I started my day. No matter what happened that day, i knew i had done something good for myself. That made me happy.</li>
<li>I made sure to <strong>drink a lot of water</strong>. Dehydration is very fatiguing on the body - this fatigue can quickly turn to crankiness. So drink up!</li>
<li>I <strong>made a playlist</strong> of 'pump up' tunes. Played them on blast and repeat. I made sure to choose songs that had great memories attached and got my heart rate going. It's amazing how much dancing around your house (or apartment) totally uninhibited, can put a smile on your face!</li>
<li>Made a point to <strong>hang out with a friend that really makes me feel good</strong> - is a lot of energy and has a great sense of humor. Laughter is always the best medicine for the blues.</li>
<li><strong>Read example</strong>, of course! There is so much great stuff here, that i can always find something to cheer me up. ;) (some of those great finds are below!)</li>
<p>Hope you are having an excellent week!</p>
<p>Be well,</p>
<p>Erin</p>
</ol>
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
<br>
<table>
<tr>
<td valign="top" width="275" class="leftColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="400">
<tr mc:repeatable>
<td valign="top" style="border:1px solid #e8e8e8;">
<img src="bulb.png" mc:label="image" mc:edit="post1" />
<div mc:edit="tiwc300_content00" style="padding:20px;">
<h4 class="h4" style="color:#3db0df;">3 Tips for Finding Positivity in an Endlessly Negative Workplace</h4>
<p>Today’s society is riddled with negativity. Maybe it’s like this for every generation...</p>
<a target="_blank" href="" style="text-decoration:none;color:#3db0df;">Continue Reading >></a>
</div>
</td>
</8r>
</table>
<!-- // End Module: Top Image with Content \\ -->
</td>
<td width="44"></td>
<td valign="top" width="275" class="rightColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="400">
<tr mc:repeatable>
<td valign="top" style="border: 1px solid #e8e8e8;">
<img src="dog.png" mc:label="image" mc:edit="post2"/>
<div mc:edit="post2" style="padding:20px;">
<h4 class="h4" style="color:#3db0df;">What to Do When You Don’t Feel Like Doing Anything</h4>
<p>Where in your life is stress a noticeable concern? Maybe you get stressed out from work, family responsibilities...</p>
<a target="_blank" href="" style="text-decoration:none;color:#3db0df;">Continue Reading >></a>
</div>
</td>
</tr>
</table>
<!-- // End Module: Top Image with Content \\ -->
</td>
</tr>
</table>
<table>
<h1 mc:edit="sponsor" class="support">example is pleased to support</h1>
</table>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="600" style="background-color:#FFFFFF;">
<div style="width:600px;background-color:#FFFFFF;padding:10px 0;margin-bottom:70px;">
<img mc:edit="advertisement" src="ad.png" />
</div>
</table>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="600" style="background-color: #FFFFFF; border-top:1px solid #e8e8e8;">
<div class="all-footer-links" style="margin-right:20px;">
<div style="float:left;margin:-127px 0 0 0;">
<img mc:edit="footer-logo" src="logo-footer.png"/>
</div>
<div style="margin-right:10px;">
<a target="_blank" class="footer-links" href="http://www.example.com/blog/motivation/">Motivation</a> |
<a target="_blank" class="footer-links" href="http://www.example.com/blog/productivity/">Productivity</a> |
<a target="_blank" class="footer-links" href="http://www.example.com/blog/health/">Health</a> |
<a target="_blank" class="footer-links" href="http://www.example.com/blog/self-improvement/">Self Improvement</a> |
<a target="_blank" class="footer-links" href="http://www.example.com/blog/contact/">Contact Us</a>
</div>
</div>
<div mc:edit="footer-links" class="the-footer">
<p style="float:left;font-size:10px;margin-left:10px;">Copyright © 2012 example</p>
<div style="margin-right:10px;">
<a target="_blank" href="http://www.facebook.com/example"><img mc:edit="facebook" src="facebook.png" /></a>
<a target="_blank" href="http://www.twitter.com/example"><img mc:edit="twitter" src="twitter.png" /></a>
<a target="_blank" href="https://plus.google.com/102257056998496075187"><img mc:edit="googleplus" src="googleplus.png" /></a>
<a target="_blank" href="http://feeds.feedburner.com/example/LYVv/"><img mc:edit="rss" src="rss.png" /></a>
</div>
</div>
</table>
</center>
</body>
に変更身長電子メールのCSSは一般に動作しません。あなたの最善の策は、それが1997年であり、そのようなコードのふりをすることです。 – Cfreak
@Cfreak、1997年のことはとても特別？ – tusar
@tusarポイントは、最小限のスタイルでHTML3を使用することが問題を解決する方法であるということでした。あなたの答えに私は同意します。 – Cfreak