【问题标题】:fixed width table containing 100% width image - border right missing包含 100% 宽度图像的固定宽度表格 - 右边框缺失
【发布时间】:2014-03-25 04:23:04
【问题描述】:

我正在创建响应式 HTML 电子邮件。在较大的视口中,我的表格固定宽度为 600 像素。表格内是 100% 宽度的图像,边框为 1px。在某些电子邮件客户端中,右侧边框未显示。我想这是因为 100% 宽度加上 2px 超过 600px?我该如何克服这个问题?

我的图片有 display:block(如果感兴趣的话)。我已经尝试过 box-sizing:border-box 但它似乎不起作用......我是否将此样式添加到图像或表格中,或两者都添加,我在哪里将它添加到我的代码中?

感谢您的帮助

标记

【问题讨论】:

    标签: email border


    【解决方案1】:

    我自己还没有尝试过,但其中一种应该适合你。这是一种流畅的技术,可以(希望)在任何大小的视口上的任何电子邮件客户端中工作:

    <!-- Simple - but will have the image area set as the border color (black) when image is not loaded -->
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="100%" bgcolor="#000000" style="padding:1px;">
          <img alt="" src="http://placehold.it/350x350" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
        </td>
      </tr>
    </table>
    
    <br><br>
    
    <!-- Setting a background color in a nested table to hide border color -->
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="100%" bgcolor="#000000" style="padding:1px;">
          <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
            <tr>
              <td>
                <img alt="" src="http://placehold.it/350x350" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    

    【讨论】:

      猜你喜欢
      • 2014-06-13
      • 2019-01-27
      • 1970-01-01
      • 1970-01-01
      • 2012-09-25
      • 1970-01-01
      • 1970-01-01
      • 2013-04-03
      • 1970-01-01
      相关资源
      最近更新 更多