2017-09-14 1 views
0

"Windows 10 Mail"에만 문제가있는 전자 메일을 쓰고 있습니다. 중간 TD에 그래픽이있는 3 개의 테이블 셀이 있습니다. 왼쪽 & 오른쪽 TD는 회색 배경의 2 픽셀 높이 테이블을 포함합니다. 아이콘이 2 개의 회색 선으로 둘러싸인 것처럼 보이게하는 것입니다.Windows 10 Mail에서 큰 TD 셀을 제공합니다.

작은 테이블에는 모두 height=2이 적용됩니다. VML 코드를 사용해 보았습니다. 효과가 없습니다. 어떤 아이디어?

결과 : 아래

Desired ResultWindows 10 Mail Result

코드 : 전자 메일 클라이언트가 열이 너무 높은 높이를 만드는 몇 가지 이유를 들어

<table cellpadding="0" cellspacing="0" border="0" width="300" style="max-width: 300px"> 
 
\t <tr> 
 
\t \t <td valign="middle" width="35%" style="max-width: 108px; line-height: 0; font-size: 0"> 
 
\t \t \t <!-- Left Gray Table --> 
 
    \t \t \t <table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 108px; max-height: 2px" height="2"> 
 
    \t \t \t \t <tr> 
 
    \t \t \t \t <td height="2" bgcolor="#EAEAEA" style="height: 2px; background-color: #eaeaea; font-size: 0; line-height: 0"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/spacer.gif" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block"> 
 
    \t \t \t \t </td> 
 
    \t \t \t \t </tr> 
 
\t \t \t </table> 
 
\t \t \t <!-- END Left Gray Table --> 
 
\t \t </td> 
 
\t \t <td align="center" valign="middle" width="53" class="full-width-image" height="92"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/icon-quick-answers.png" alt="Chat bubble icon" width="106" height="92" style="border-width:0;display:block;width:100%;max-width:53px;height:auto; max-height:92px"> 
 
\t \t </td> 
 
\t \t <td valign="middle" width="35%" style="max-width: 108px;"> 
 
\t \t \t <!-- RIGHT Gray Table --> 
 
\t \t \t <table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 108px; min-height: 2px; max-height: 2px" height="2"> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td height="2" bgcolor="#EAEAEA" style="height: 2px; background-color: #eaeaea; font-size: 0; line-height: 0"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/spacer.gif" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block"> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </table> 
 
\t \t \t <!-- END RIGHT Gray Table --> 
 
\t \t </td> 
 
\t </tr> 
 
</table>

답변

0

. 이 방법을 통해 그것이 어떻게 진행되는지보십시오. enter image description here

<table cellpadding="0" cellspacing="0" border="0" width="300" style="max-width: 300px"> 
 
\t <tr> 
 
\t \t <td valign="middle" width="35%" style="max-width: 108px; "> 
 
\t \t \t <!-- Left Gray Table --> 
 
    \t \t \t <img src="https://i.stack.imgur.com/T24O6.png" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block"> 
 
\t \t \t <!-- END Left Gray Table --> 
 
\t \t </td> 
 
\t \t <td align="center" valign="middle" width="53" class="full-width-image" height="92"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/icon-quick-answers.png" alt="Chat bubble icon" width="106" height="92" style="border-width:0;display:block;width:100%;max-width:53px;height:auto; max-height:92px"> 
 
\t \t </td> 
 
\t \t <td valign="middle" width="35%" style="max-width: 108px;"> 
 
\t \t \t <!-- RIGHT Gray Table --> 
 
\t \t \t <img src="https://i.stack.imgur.com/T24O6.png" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block"> 
 
\t \t \t <!-- END RIGHT Gray Table --> 
 
\t \t </td> 
 
\t </tr> 
 
</table>

뿐만 아니라 Outlook에서 테스트. 내가 한 것은 1 픽셀 높이의 회색 이미지를 추가 한 것입니다.

희망이 있습니다.