2013-10-07 6 views
0

Итак, у меня есть этот HTML эл.адрес:IPad шаблон электронной почты вопрос

<!Doctype HTML><html> 
<head> 
    <!-- Meta --> 
    <meta charset="utf-8"> 
</head> 
<table style=" width: 100%; box-shadow: 0px 0px 5px 0px #a5a5a5;"> 
    <tr class="header"> 
     <td class="logo" style="padding-top: 10px; padding-left: 20px;"> 
      <img src="header_logo.png" alt="Logoimage"/> 
     </td> 
    </tr> 
</table> 
<table style="width: 100%; box-sizing: border-box; box-shadow: 0px 1px 5px 0px #a5a5a5;"> 
    <tr style="width: 100%; display: block;"> 
     <td style=""><h2>Congratulations on your new website!</h2></td> 
     <td class="content" style="margin-top:20px; display: block; clear:both; min-width: 100%;"> 
      General description here.. write whatever you want. 
     </td> 
    </tr> 
    <tr style="width: 100%; display: block;"> 
     <td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; margin-bottom: 10px; width: 100%; display: block;"><h2>Account information</h2></td> 
     <td class="content" style="margin-top:20px; width:100%; display: block;"> 
      <h3 style="margin: 0">First name:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_FIRST_NAME!!</span></h3> 
      <h3 style="margin: 0">Last name:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_LAST_NAME!!</span></h3> 
      <h3 style="margin: 0">Email:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_EMAIL!!</span></h3> 
      <h3 style="margin: 0">Phone:<span style="font-weight: normal; margin-left: 10px;">!!PHONE!!</span></h3> 
     </td> 
     <td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; width: 100%"><h2>Property information</h2></td> 
     <td class="content" style="margin-top:20px; width: 100%; display: block;"> 
      <h3 style="margin: 0">Listing Site:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_IS_LISTED!!</span></h3> 
      <h3 style="margin: 0">Listing Number:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_ID!!</span></h3> 
      <h3 style="margin: 0">Property Name:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_NAME!!</span></h3> 
      <h3 style="margin: 0">Address:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STREET_ADDRESS!!</span></h3> 
      <h3 style="margin: 0">City:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_CITY!!</span></h3> 
      <h3 style="margin: 0">State:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STATE!!</span></h3> 
      <h3 style="margin: 0">Country:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STATE!!</span></h3> 
     </td> 
    </tr> 
    <tr style="margin-top: 10px; padding-bottom:5px; width: 100%; display: block;"> 
     <td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; margin-bottom: 10px; display: block;"><h2>your site</h2></td> 
     <td class="content" style="margin-top:20px; display: block;"> 
      <h3 style="margin: 0">Site URL:<span style="font-weight: normal; margin-left: 10px;">!!SITE_URL!!</span></h3> 
      <h3 style="margin: 0">Design name:<span style="font-weight: normal; margin-left: 10px;">!!DESIGN_NAME!!</span></h3> 
      <img style="width:100%; margin-top: 20px;" src="http://vsbtest.com/Latestwizard/images/designs/design3.jpg" alt="Site template preview"/> 
     </td> 
    </tr> 
</table> 
<table style="width: 100%; height: 55px; background: #fff; z-index:5; box-shadow: 0px 1px 5px 0px #a5a5a5;"> 
    <tr class="copyright"> 
     <td style="padding-top: 10px; padding-left: 20px; display: block; clear:both;">&copy; 2013</td> 
    </tr> 
</table></html> 

И это показывает, как я хочу (полная ширина ячейки таблицы) на крупных клиентов электронной почты - Gmail, Thunderbird, приложение Gmail для Android, но когда используя приложение электронной почты из iPad, он не работает нормально .. он не «берет» 100% ширину и помещает все ячейки таблицы в строку. Я знаю, что могу решить эту проблему, просто добавив каждую ячейку в отдельную строку, но я не хочу этого, если нет другого решения.

У вас есть идеи, почему это происходит? Я не могу понять, почему. он должен выглядеть примерно так: http://jsfiddle.net/6YqmL/1/

+1

Вы используете неправильный html. Вы должны добавить '' -Tag. Пожалуйста, сначала проверьте свой html на достоверность (например, валидатор W3c). – urzeit

+0

Этот вопрос кажется не по теме, потому что это опечатка. –

+0

Это не опечатка. Мой плохой, что я забыл добавить в этот код тег , но это не имело никакого значения. С тегом или без него эффект тот же. –

ответ

0

Тэг заголовка не поддерживается постоянно в html-email. вместо того, чтобы использовать <h3>, попробуйте стилизовать их в ячейке таблицы или теге шрифта и используйте двойной <br>, чтобы отделить их.

Смежные вопросы