为什么 <hr> 在 prod 和 watch 模式下是不同的？

Question

我为我们的内部时事通讯制作电子邮件模板，我想使用专为创建最佳 html 电子邮件而创建的框架，Foundation for Emails 2。

很好，但我对 <hr> 元素有疑问。我想给它 100% 的宽度。如果我在watch 模式下运行它，它可以工作：

但是如果我运行build 任务，它是这样的（它更短），我真的不知道为什么：

有没有人对这个框架有更多的经验？

墨色：

<container>
    <row>
        <columns class="bigger-space line" large="12">
            <hr />
        </columns>
    </row>
</container>

相关 CSS：

.bigger-space {
  padding-right: 30px !important;
  padding-left: 30px !important;
}

.line {
  padding-bottom: 30px !important;

  tbody tr th:first-child {
    width: 100% !important;
  }
}

在观看模式下生成的 HTML：

<!-- SEPARATOR LINE -->
<table class="container float-center"><tbody><tr><td>
<table class="row"><tbody><tr>
    <th class="bigger-space line small-12 large-12 columns first last">
      <table>
        <tr>
          <th>
            <hr>
        </th>
        <th class="expander"></th>
       </tr>
     </table>
   </th>
</tr></tbody></table>

在构建模式下生成的 HTML：

<table class="container float-center" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;Margin:0 auto;background:#fefefe;border-collapse:collapse;border-spacing:0;float:none;font-weight:400!important;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:500px"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><td style="-moz-hyphens:auto;-ms-text-size-adjust:100%;-webkit-hyphens:auto;-webkit-text-size-adjust:100%;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400!important;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><table class="row" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;border-collapse:collapse;border-spacing:0;display:table;font-weight:400!important;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="bigger-space line small-12 large-12 columns first last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:30px!important;padding-left:30px!important;padding-right:30px!important;text-align:left;width:500px"><table style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;border-collapse:collapse;border-spacing:0;font-weight:400!important;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left"><hr style="Margin:20px auto;border-bottom:1px solid #cacaca;border-left:0;border-right:0;border-top:0;clear:both;height:0;margin:0!important;max-width:500px"></th><th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th></tr></tbody></table></th></tr></tbody></table></td></tr></tbody></table> 

Answer 1

我刚刚找到了一个解决方法，它是 Zurb 框架的问题：https://github.com/zurb/foundation-emails/issues/434。

HTML：

<row>
  <columns>
    <p class="hr-fix">&nbsp;</p>
    <hr>
  </columns>
</row>

CSS：

.hr-fix{
  line-height: 0px !important;
}

抱歉，下次我应该先看看问题。