Chrome의 텍스트 그림자 - Gmail에 오류가 발생 했습니까?

Question

그래서 CSS "텍스트 그림자"를 사용하는 웹 페이지가 하나 있습니다.

Chrome에서 웹 페이지를 탐색하면 예상대로 텍스트 그림자 효과가 나타납니다.

Gmail 계정에 HTML 이메일을 보내고 동일한 브라우저를 사용하여 Gmail 내부 페이지를 볼 경우 텍스트 섀도우 효과가 사라집니다.

링크 된 그림을 참조하십시오. 왼쪽 부분은 페이지를 서핑 할 때 오른쪽 부분이 Gmail에서 나에게 보낼 때 동일한 html 콘텐츠입니다. 보시다시피 그림자 효과는 사라졌습니다. 여기

사진 :

<style type="text/css"> 
     p { padding: 0; margin: 0; } 
     h1, h2, h3, p, li { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } 
     td { vertical-align:top;} 
     ul, ol { margin: 0; padding: 0;} 
     .title, .date { 
      text-shadow: #8aa3c6 0px 1px 0px; 
     } 

     .textshadow { 
      text-shadow: #ffffff 0px 1px 0px; 
     } 
     .trxtshadow-2 { 
      text-shadow: #768296 0px -1px 0px; 
     } 
    </style> 

나에게 이상한 소리 :Picture

이 사용하는 CSS입니다. 어떤 아이디어?

Answer 1

Gmail은 <style> 블록을 전자 메일로 지원하지 않습니다. 최대한의 호환성을 위해 대부분의 HTML 메일에서 인라인 스타일을 사용해야합니다. 그래, 못 생겼어. 그러나 그것은 현재의 현실입니다.

은 다음을 참조하십시오 여호수아가 말한대로

• Campaign Monitor - Guide to css support in e-mail clients
• Sitepoint - How to code HTML newsletters
• Campaign Monitor - Email design guidlines

Answer 2

은 Gmail은 <style> 블록을 제거합니다뿐만 아니라 인라인 블록에서 일부 몇 가지 스타일을 제거합니다 뿐만 아니라, 내가 발견 한 것처럼 text-shadow 및 border-radius을 포함합니다.

html 전자 메일의 요소에이 스타일을 인라인으로 설정 한 경우 gmail에서 방화 덩어리를 시작하고 살펴 봅니다. 사라졌습니다. 그러나 이메일에 '원본을 표시'하면 스타일이 표시됩니다.

나는 여러 브라우저에서 일관성있게 보이기를 원한다고 생각하지만 이상한 행동이며 gmail의 일부로 많이 사용 된 것 같습니다.