HTML Email：如何制作图片重叠边框？

Question

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

我可以通过移动 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>

我的第二次尝试是使用 rowspan 和 border-bottom 到 table 单元格而不是 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 table 行，将 rowspan=3 添加到 logo-image-td 并在最后一个 td 行上添加 border-bottom 来解决它，而没有带有徽标的 td。

HTML Email：如何制作图片重叠边框？

HTML Email: How to make image overlapping border?

html

css

zurb-foundation