26
Gmail、Apple Mail、およびiOS Mailに大きな問題なく、HTMLメールテンプレートが正しく表示されています。 Outlookはしかし、恐ろしい混乱と私は私の人生のために私が間違ってやったことを把握することはできませんか？Outlookのテーブルの幅のHTML電子メールの問題 - コンテンツが指定されたテーブルの幅よりも広い
私の電子メールテンプレートは過度に狂ったCSSを使用しておらず、レイアウト用のテーブルを使用しています。私はすべてのものに対してピクセル幅を固定しています。
問題は、私のレイアウトのすべてのテーブルがコンテナ用に580px、内部コンテンツ用に450pxに設定されているにもかかわらず100％に伸びていることです。
CODE：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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;} /* 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:none; font-size:14px; font-weight:bold; height:auto; line-height:100%; outline:none; text-decoration:none; text-transform:capitalize;}
</style>
</head>
<body bgcolor="#444444">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="580px" style="background-color: #0290ba;">
<tr>
<td align="center" valign="top">
<img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/header.png" width="580px" />
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="450px">
<tr>
<td align="center" valign="top" width="450px">
<br />
<img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/hello_header.png" width="450px" />
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="450px">
<tr>
<td align="center" valign="top" width="214px">
<br />
<div style="color:#004c63; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic;">
We consider ourselves partners in your business with the specific purpose of making your profit grow.
</div>
</td>
<td width="236px"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="450px">
<tr>
<td align="center" valign="top" width="214px">
<p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;">
We have been pretty busy for the last 2 1/2 years getting our business up and running, busy doing day to day and long term projects for our clients. But it's come to our attention not everyone is aware of all the cool (and not so cool but just as important) things we do. So we're going to show off a bit, tell you a bit more about what we do so you can benefit from our wide range of skills, services and experiences. This email is the start of that process: we're going to show you a small (we don't want to annoy you with too much stuff) but diverse selection of projects each <!-- month to hopefully inspire you. Then if you want any information or ideas on how we could do something similar for you just let us know - we'd love to help! We are also in the process of building ourselves a new web site (finally) - we'll let you know when its live but check out our temporary page in the mean time - here. -->
</p>
</td>
<td width="236px">
<p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;">
<img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/world-icon-image.png" width="110%" style="margin-left: 20px;" />
</p>
<br />
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color: #d82445;">
<td align="center" valign="top">
<img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/divider_showcase.png" width="580px" />
</td>
</tr>
<tr style="background-color: #d82445;">
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="450px">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="124px">
<img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/showcase_image1.png" width="124px" />
</td>
<td width="10px"></td>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="316px">
<tr>
<td valign="top">
<div style="color:#6c1e2c; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic; font-weight: 500;">
Title Goes Here
</div>
</td>
</tr>
<tr>
<td valign="top" width="150px">
<p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;">
Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem .
</p>
</td>
<td width="10px"></td>
<td valign="top" width="160px">
<p style="margin-top: 20px;">
<a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_forward.png" style="margin-top: -10px;" /></a>
<br />
<br />
<a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_moreinfo.png" /></a>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="124px">
<img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/showcase_image1.png" width="124px" />
</td>
<td width="10px"></td>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="316px">
<tr>
<td valign="top">
<div style="color:#6c1e2c; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic; font-weight: 500;">
Title Goes Here
</div>
</td>
</tr>
<tr>
<td valign="top" width="150px">
<p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;">
Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem .
</p>
</td>
<td width="10px"></td>
<td valign="top" width="160px">
<p style="margin-top: 20px;">
<a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_forward.png" style="margin-top: -10px;" /></a>
<br />
<br />
<a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_moreinfo.png" /></a>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="124px">
<img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/showcase_image1.png" width="124px" />
</td>
<td width="10px"></td>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="316px">
<tr>
<td valign="top">
<div style="color:#6c1e2c; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic; font-weight: 500;">
Title Goes Here
</div>
</td>
</tr>
<tr>
<td valign="top" width="150px">
<p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;">
Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem .
</p>
</td>
<td width="10px"></td>
<td valign="top" width="160px">
<p style="margin-top: 20px;">
<a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_forward.png" style="margin-top: -10px;" /></a>
<br />
<br />
<a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_moreinfo.png" /></a>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<br />
</td>
</tr>
<tr style="background-color: #fdac57;">
<td align="center" valign="top">
<img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/divider_footer.png" width="580px" />
</td>
</tr>
<tr style="background-color: #fdac57;">
<td align="center" valign="top">
<table width="450px" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table>
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="215px">
<div style="color:#6c1e2c; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic; font-weight: 500;">
Drop us a line, <br />
visit our website, or <br />
forward this to a friend.
</div>
</td>
<td valign="top" width="40px">
</td>
<td valign="top" width="195px">
<div style="color:#6c1e2c; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic; font-weight: 500;">
Get in touch <br />
today - You’ll <br />
love working with us
</div>
</td>
</tr>
<tr>
<td valign="top" width="215px">
<p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;">
Don’t worry if it's an odd hour, leave a message and we will get back to you at your convenience.
</p>
</td>
<td valign="top" width="40px">
</td>
<td valign="top" width="195px">
<p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;">
163 Bateau Bay Rd, Bateau Bay, <br />
NSW 2261, <br />
Australia
</p>
</td>
</tr>
<tr>
<td valign="bottom" width="215px">
<p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;">
<a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/icons/twitter.png" style="padding:0; padding-right: 5px; margin: 0;" /></a>
<a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/icons/facebook.png" style="padding:0; padding-right: 5px; margin: 0;" /></a>
<a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/icons/vimeo.png" style="padding:0; padding-right: 5px; margin: 0;" /></a>
<a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/icons/instagram.png" style="padding:0; padding-right: 5px; margin: 0;" /></a>
</p>
</td>
<td valign="top" width="40px">
</td>
<td valign="top" width="195px">
<p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;">
-- --- ----, ------ --- --- ---- <br />
+-- - ---- ---- <br />
[email protected] <br />
--------.com <br />
</p>
</td>
</tr>
</table>
<br />
<table width="450px">
<tr>
<td width="144px" align="center">
<a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_footer_forward.png" /></a>
</td>
<td width="6px"> </td>
<td width="144px" align="center">
<a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_footer_visit.png" /></a>
</td>
<td width="6px"> </td>
<td width="144px" align="center">
<a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_footer_getintouch.png" /></a>
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color: #FDFDFD;">
<td align="center" valign="top">
<br />
<img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/logo.png" /> <br />
<p style="line-height: 150%; color: #000000; text-align: center; font-size: 10px;">© Copyright 2013 HicksAds - Sent With love :)</p>
</td>
</tr>
</table>
</center>
</body>
</html>
信じられないほど感謝のような任意の助けを大幅に..
ありがとうございました！私はそれが簡単だとは信じられません。これは私の最初のフリーランスの仕事のために取り上げたことですが、少なくとも私の最初の仕事は絶対的なものではありません。私は十分にあなたに感謝することはできません –
これは、テーブルの余白が無視されている私の問題を解決しました。ありがとう！ – jamesnotjim
私は酸**でメールを送ることをお勧めします。無料のバージョンを使用するだけであれば、個人的には私がそれを得るために最も重要だと思うGmailやOutlookがあります（hotmailはOutlook Webに移動しています） app）、他のほとんどの電子メールクライアントは、Web標準に準拠しているため、おそらく正しく出力されるでしょう。また、あなたのHTMLの改善と有効性を示唆しています。私がしたようにあなたがそれを助けてくれることを願っています！ [酸で電子メール]（https://www.emailonacid.com/） –