HTML 可点击签名在 Outlook 中无法正确显示

问题描述 投票：0回答：1

我正在尝试在photoshop中制作一个可点击的html签名，并使用切片工具来切片需要可点击的部分。

它在浏览器和 Gmail 中正确显示，但在 Outlook 中，它在制作切片的某些地方制作了这些透明线。

我尝试过搜索并向人们所说需要的代码添加一些内容，但没有运气，任何人都可以提供解决方案

enter image description here

源代码

<html>
  <head>
    <title>Untitled-1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <style media="screen" type="text/css">
      td{line-height:0; font-size: 0.0em; }
      img{display: block; float: left; padding: 0} align: absbottom; align: texttop;; }
    </style>
  </head>
  <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (MKCTV_Logo_Source_File.png) -->
    <table id="Table_01" style="border-collapse: collapse" width="650" height="325" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="7">
          <img src="https://i.postimg.cc/C599BwcG/100-01.png" width="650" height="38" alt="" style="display: block" />
        </td>
      </tr>
      <tr>
        <td rowspan="6">
          <img src="https://i.postimg.cc/SQPBtGmn/100-02.png" width="10" height="287" alt="" style="display: block" />
        </td>
        <td rowspan="5">
          <img src="https://i.postimg.cc/wj8S9TyH/100-03.png" width="240" height="236" alt="" style="display: block" />
        </td>
        <td colspan="5">
          <img src="https://i.postimg.cc/65GksGQY/100-04.png" width="400" height="74" alt="" style="display: block" />
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <img src="https://i.postimg.cc/Sx6HRFC9/100-05.png" width="311" height="46" alt="" style="display: block" />
        </td>
        <td rowspan="5">
          <img src="https://i.postimg.cc/1zy2NCrj/100-06.png" width="89" height="213" alt="" style="display: block" />
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <img src="https://i.postimg.cc/ZqjgP8fK/100-07.png" width="311" height="45" alt="" style="display: block" />
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <img src="https://i.postimg.cc/Y99PdvVN/100-08.png" width="311" height="38" alt="" style="display: block" />
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <img src="https://i.postimg.cc/sXNNqVdk/100-09.png" width="311" height="33" alt="" style="display: block" />
        </td>
      </tr>
      <tr>
        <td>
          <img src="https://i.postimg.cc/L5gbMrmn/100-10.png" width="240" height="51" alt="" style="display: block" />
        </td>
        <td>
          <img src="https://i.postimg.cc/vDRS83mX/100-11.png" width="52" height="51" alt="" style="display: block" />
        </td>
        <td>
          <img src="https://i.postimg.cc/667W3q3G/100-12.png" width="39" height="51" alt="" style="display: block" />
        </td>
        <td>
          <img src="https://i.postimg.cc/T2ZRWxLN/100-13.png" width="39" height="51" alt="" style="display: block" />
        </td>
        <td>
          <img src="https://i.postimg.cc/tCW93cFq/100-14.png" width="181" height="51" alt="" style="display: block" />
        </td>
      </tr>
    </table>
    <!-- End Save for Web Slices -->
  </body>
</html>

html css outlook html-email photoshop
1个回答
0
投票

问题来自您的 

<style>
标签中的以下行：

td{line-height:0; font-size: 0em; }

更具体地说，它来自

line-height:0;
。无论如何，这应该是不需要的，所以我认为你可以安全地完全删除它。

请注意，样式标签的第二行也存在语法错误 (

padding: 0} align: absbottom; align: texttop;; }
)。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.