HTML电子邮件：如何使图像重叠边框？

Question

我使用基金会电子邮件和希望位置的菜单项和尼罗河标志下方的水平标尺<hr>：

我可以移动小时hr { margin-top: -1rem; }实现这一目标。

不幸的是（根据Litmus）CSS属性保证金无法在Outlook邮件客户端支持，它显示是这样的：

<center class="header float-center" align="center" data-parsed=""> 
    <table align="center" class="menu float-center"> 
    <tbody> 
     <tr> 
     <td> 
      <table> 
      <tbody> 
       <tr> 
       <th class="menu-item float-center"> 
        <%= link_to t('view.nav.women'), seo_url(Spree::Taxon.new_in) %> 
       </th> 
       <th class="menu-item float-center"> 

        <%= link_to t('view.nav.men'), seo_url(Spree::Taxon.new_in) %> 
       </th> 
       <th class="menu-item float-center"> 
        <%= link_to root_path do %> 
        <img src="nile_logo.png" alt="NILE Logo" width="120px" height="70px" /> 
        <% end %> 
       </th> 
       <th class="menu-item float-center"> 
        <%= link_to t('view.nav.stores'), page_path('stores') %> 
       </th> 
       <th class="menu-item float-center"> 
        <%= link_to t('view.nav.lifestyle'), page_path('lifestyle') %> 
       </th> 
       </tr> 
      </tbody> 
      </table> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</center> 
<hr> 

我的第二次尝试与下边框使用行跨度以表格单元而不是小时，但图像跨越行，以便边框不重叠。

<center class="header float-center" align="center" data-parsed=""> 
    <table align="center" class="menu float-center"> 
    <tbody> 
     <tr> 
     <td> 
      <table> 
      <tbody> 
       <tr> 
       <th class="border menu-item float-center"> 
        <%= link_to t('view.nav.women'), seo_url(Spree::Taxon.new_in) %> 
       </th> 
       <th class="border menu-item float-center"> 
        <%= link_to t('view.nav.men'), seo_url(Spree::Taxon.new_in) %> 
       </th> 
       <th class="menu-item float-center"> 
        <%= link_to root_path do %> 
        <img src="https://www.nile.ch/nile_logo.png" alt="NILE Logo" width="120px" height="70px" /> 
        <% end %> 
       </th> 
       <th class="border menu-item float-center"> 
        <%= link_to t('view.nav.stores'), page_path('stores') %> 
       </th> 
       <th class="border menu-item float-center"> 
        <%= link_to t('view.nav.lifestyle'), page_path('lifestyle') %> 
       </th> 
       </tr> 
       <tr> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       </tr> 
      </tbody> 
      </table> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</center> 

什么选择我必须放置在水平标尺精确到标志图像下方的布局样机？

Answer 1

我可以通过制作3个表行来解决这个问题，rowspan = 3到logo-image-td并且在最后一个td行添加border-bottom而没有一个带logo的td。