html电子邮件在hotmail和outlook中使用“在桌面上使用浮动”时会中断

时间:2015-01-07 09:06:24

标签: outlook html-email hotmail

我有一封HTML电子邮件,其中包含' mini table'漂浮在彼此身上。

因此,我能够得到两个彼此相对的迷你桌子;迷你桌然后相互叠加。

它在雅虎电子邮件中运行良好,但在 Hotmail Outlook ,然后在手机/平板电脑上崩溃。

以下是雅虎电子邮件中的外观示例:

enter image description here

但这是它在Outlook和Hotmail中的样子:

enter image description here

我已附上我的代码

我使用动态PHP foreach循环从数据库生成数据。

foreach ($this->getMembers() as $user)

{ 


<td width='310' style='float:left'>
   <TABLE width='300'  border='0' colour='#FFFFFF' bgcolor='#FFFFFF' style='margin-left: 5px;  border: 1px solid #999999; float: left; margin-top: 10px; margin-bottom: 10px'>
    <TR>

    <TH ROWSPAN=5 width='150' height='150'>
          <a href='https://www.bab.com/profile'>
             <img src='https://www.bab.com />  
          </a> 
      </TH>
       <TD width='150'  >
        {$user->getFirstName()}&nbsp;&nbsp;(Aged: {$user->getActualAge()})
       </TD> 
    </TR>
    <TR height='30'>
       <TD >
          {$user->getCity()}
        </TD>
    </TR>
    <TR >
        <TD >
           22 Miles Away
        </TD>
    </TR>
   <TR >
      <TD>
         {$user->getNoYrsWorkExperience()} yrs exp
      </TD>
   </TR>
   <TR >
      <TD >
        Salary: &#163; {$user->getSalaryAmount()}/hr 
      </TD>
   </TR>
    <TR>
        <TH ROWSPAN=3 width='150' height='55'>
          <table height='55'>
              <tr height='38'>
                 <td>
                     <a href='https://www.baby.com/profile/{$user->getId()}'>
                         <img src='https://www.bab.com/htmlEmailsIcons/contactMe2.png' width='113' height='38'  />  
                     </a>
                  </td>
             </tr>
            <tr height='10'>
              <td>
                 <a href='https://www.bab.com/profile/{$user->getId()}'>
                      View My Profile
                 </a>
               </td>
            </tr>
      </table>
   </TH>
 </TR>
    <TR>
       <TD  align='center'>
          Available From:
        </TD> 
   </TR>
   <TR>
     <TD>
        {$this->availFrom()}- {$this->availTill()}
     </TD> 
</TR>

   

}

上述代码包含在格式正确的HTML电子邮件中。为简单起见,我没有附上它。

非常感谢有关为何打破Hotmail的一些建议。

3 个答案:

答案 0 :(得分:0)

可能不会解决问题,但值得尝试:所有其他参数都在单引号内,但TH的“rowspan”根本没有引用。

答案 1 :(得分:0)

首先,不要使用花车。大多数电子邮件客户端无法正确呈现它们 请使用对齐,就像您在单元格外壳'Available From:'

上一样

答案 2 :(得分:0)

如上所述 - 不要使用浮动。在任何电子邮件客户端上几乎不支持它。还注意到您的代码存在其他问题:

  1. 图片标记来源
  2. 没有结尾报价
  3. 不要使用保证金。使用Cellpadding或cellspacing是最好的,但可以使用TD填充。
  4. 将所有css设置为longhand(例如 - border-size:1px; border-style:solid; border-color:#999999)它更有可能被电子邮件客户端识别和理解。
  5. 不一定是错误,而是标签中的额外空格。应该不是。
  6. 围绕rowspan编号
  7. 没有引号

    以下是我能提出的最好的帮助。如果没有更准确的信息来确定电子邮件中的内容,我最好能做到。我在下面的代码中添加了一个开始表标签和关闭表标签:

        <table>
      <tr>
    
    foreach ($this->getMembers() as $user)
    
    { 
    
    <td width='310' align="left" style="padding-left:5px; padding-top:10px; padding-bottom:10px;">
       <TABLE width='300' align="left" border='0' color='#FFFFFF' bgcolor='#FFFFFF' style='border-size: 1px; border-style: solid; border-color: #999999;'>
        <TR>
    
        <TH ROWSPAN="5" width='150' height='150'>
              <a href='https://www.bab.com/profile'>
                 <img src='https://www.bab.com' />  
              </a> 
          </TH>
           <TD width='150'>
            {$user->getFirstName()}&nbsp;&nbsp;(Aged: {$user->getActualAge()})
           </TD> 
        </TR>
        <TR height='30'>
           <TD >
              {$user->getCity()}
            </TD>
        </TR>
        <TR>
            <TD>
               22 Miles Away
            </TD>
        </TR>
       <TR>
          <TD>
             {$user->getNoYrsWorkExperience()} yrs exp
          </TD>
       </TR>
       <TR>
          <TD >
            Salary: &#163; {$user->getSalaryAmount()}/hr 
          </TD>
       </TR>
        <TR>
            <TH ROWSPAN="3" width='150' height='55'>
              <table height='55'>
                  <tr height='38'>
                     <td>
                         <a href='https://www.baby.com/profile/{$user->getId()}'>
                             <img src='https://www.bab.com/htmlEmailsIcons/contactMe2.png' width='113' height='38'  />  
                         </a>
                      </td>
                 </tr>
                <tr height='10'>
                  <td>
                     <a href='https://www.bab.com/profile/{$user->getId()}'>
                          View My Profile
                     </a>
                   </td>
                </tr>
          </table>
       </TH>
     </TR>
        <TR>
           <TD align='center'>
              Available From:
            </TD> 
       </TR>
       <TR>
         <TD>
            {$this->availFrom()}- {$this->availTill()}
         </TD> 
    </TR>
    </TABLE>
    </td>
    </tr>
    </table>