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

Question

我正在使用Foundation for Emails，并希望在菜单项和NILE-Logo下方放置一个水平标尺<hr>：

我可以通过移动hr hr { margin-top: -1rem; }来实现这一点。

不幸的是（根据Litmus）Outlook邮件客户端不支持CSS属性边距，它显示如下：

<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>

我的第二次尝试是使用带有border-bottom到table单元格的rowspan而不是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而不使用带有徽标的td来解决它。