약어 지점을 추가하는 Google Inbox (Gmail에는 없음)에서 html 렌더링 문제를 해결하려면 어떻게합니까?

아래에서이 이메일 레이아웃을 만들었지 만 Gmail이 올바르게 렌더링하는 이유는 무엇인지 알아보세요.하지만받은 편지함 렌더링 그것은 무섭게. 검사시약어 지점을 추가하는 Google Inbox (Gmail에는 없음)에서 html 렌더링 문제를 해결하려면 어떻게합니까?

, 그것은 자신의 테이블 요소에 잔뜩 분리 몇 가지 이유입니다. 아무도 내가 놓친 것을 본다. 나는 이메일을 위해 html로 매우 새롭다. 그리고 그것이 얼마나 나쁜지에 관해 끊임없이 충격을 받았다.

과의 Gmail : 여기

<body style="margin:0; padding:0; width:100% !important; font-family: verdana;"> 
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center"> 
    <tr> 
     <td> 
     <table cellpadding="20" cellspacing="0" border="0" align="center"> 
      <tr> 
       <td valign="top" align="center"><span style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;">shift</span><span style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;">Swap</span></td> 
      </tr> 
     </table> 
    </td> 
    </tr> 
    <!-- This is where your content goes bro --> 
    <tr> 
    <td> 
     <table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;"> 
      <tr> 
      <td style="padding: 35px;"> 
       <h3> 
       Welcome <span style="text-decoration: none;"><%= @email %></span>! 
       </h3> 
       <div> 
       <span style="display: block;">You can confirm your account email through the link below:</span> 
       <br> 
       <a href="<%= confirmation_url(@resource, confirmation_token: @token) %>" target ="_blank" style="display: block; color: orange; text-decoration: none; font-size: 150%;">Confirm your account</a> 
       <br> 
       <span style="display: block;">Or paste the following into the address bar: <%= confirmation_url(@resource, confirmation_token: @token) %></span> 
       <h3 style="padding-top: 20px;">Thanks for signing up. We're looking forward to seeing you on the site!</h3> 
       </div> 
      </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <table width="600" align="center" cellpadding="50"> 
       <tr align="center"><td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td></tr> 
      </table> 
     </td> 
    </tr> 
</table> 
</body>

은받은 편지함 어떤 이유로 나는 "확인"메시지를 보낼 때 발생하는 것으로 보인다 전체 메시지를 숨 깁니다 때 모습입니다

출처

2016-07-30 rPat

당신이 Gmail에서 보이는 방법을 보여 수 방법 뒤에 있기 때문에 정말, 이외의 모든 테이블 요소를 가지고하는 것이 좋습니다? ... 또한 왜 'span'스타일을'display : block' 스타일로 만드나요? ...'div'를 ... 사용하고 테이블 요소만을 사용하는 것이 좋기 때문에'h3' 대신 셀에 비슷한 글꼴 설정을 사용하십시오. – LGSon

이 업데이트되었습니다. 솔직히 div 나 span을 사용할 이유가 없었습니다. 이메일 클라이언트가 익숙해 진 것처럼 div를 해석하는지 확실하지 않았습니다. – rPat

테이블이 아닌 요소를 모두 가져 가면 어떻게됩니까? ... 2016 년이라 할지라도 메일 클라이언트가 뒤에 있습니다. – LGSon

가 2,016 경우에도 메일 클라이언트

<body style="margin:0; padding:0; width:100% !important; font-family: verdana;"> 
 
    <table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center"> 
 
    <tr> 
 
     <td> 
 
     <table cellpadding="20" cellspacing="0" border="0" align="center"> 
 
      <tr> 
 
      <td valign="top" width="50%" align="right" style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;padding-right: 0"> 
 
       shift    
 
      </td> 
 
      <td valign="top" align="left" style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;padding-left: 0"> 
 
       Swap 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    <!-- This is where your content goes bro --> 
 
    <tr> 
 
     <td style="padding: 35px;background: #FFF"> 
 
     <table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;"> 
 
      <tr> 
 
      <td style="text-decoration: none; font-size: 22px"> 
 
       Welcome 
 
       @ email ! 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td style="padding-top: 20px; font-size: 22px"> 
 
       You can confirm your account email through the link below: 
 
      </td>    
 
      </tr> 
 
      <tr> 
 
      <td> 
 
       <a href="<%= confirmation_url(@resource, confirmation_token: @token) %>" target="_blank" style="display: block; color: orange; text-decoration: none; font-size: 150%;">Confirm your account</a> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td> 
 
       Or paste the following into the address bar: 
 
       confirmation_url 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td style="padding: 20px 0; font-size: 22px"> 
 
       Thanks for signing up. We're looking forward to seeing you on the site! 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <table width="600" align="center" cellpadding="50"> 
 
      <tr align="center"> 
 
      <td style="color: #2b2b2b">Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> © 
 
       <%=T ime.new.year %> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body>

출처

2016-07-30 19:31:34 LGSon

"까다로운"전자 메일 클라이언트가 얼마나 까다로운 지 알 수있는 한 가지가 있습니다 예측할 수없는 결과를 초래할 수 있습니다. 이것은 오타가 아닌 다른 것을 고칠 수있는 길다. 그러나 그 코드 라인 내에서 'color : 2b2b2b'근처에 보이는 것을 보시겠습니까?

<td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td>

세미콜론은 style 속성 밖에 있습니다. Prolley 그냥 파울 공,하지만 당신은 모릅니다. ;)

출처

2016-07-30 17:25:43

약어 지점을 추가하는 Google Inbox (Gmail에는 없음)에서 html 렌더링 문제를 해결하려면 어떻게합니까?

답변

관련 문제