모바일 전자 메일 클라이언트에 표시 할 때 텍스트의 행 높이가 너무 많음

현재 Outlook 데스크톱 클라이언트에 대한 서명 디자인을 만들고 있는데 모바일의 회선 사이에 과도한 공백을 제외하고는 다양한 플랫폼에서 모두 잘 볼 수있었습니다. Outlook 및 Gmail과 같은 클라이언트. 여백 및 패딩을 모두 0으로 설정하고 100 %로 설정 했음에도 불구하고 선 높이가 150 %와 같이 설정되었습니다.모바일 전자 메일 클라이언트에 표시 할 때 텍스트의 행 높이가 너무 많음

<p style="padding:0;margin:0;line-height:100%;font-size:9pt;">One line</p> 
<p style="padding:0;margin:0;line-height:100%;font-size:9pt;">Two line</p>

이 문제와 관련하여 궁금한 점이 있으십니까? 데스크톱 클라이언트에서 문제가되는 라인 높이를 줄입니다.

출처

2017-12-13 Ben Morris

작은 화면의 스타일링에 대해 미디어 쿼리를 시도하십시오. 작은 너비 화면의 선 높이 값을 변경하기 만하면됩니다. –

불행히도 대부분의 이메일 클라이언트에서는 인라인 CSS 만 지원됩니다. 그래도 불행히도 행운을 빌어 요 당신의 제안을 전하지는 않았습니다. –

라인 높이에 % 값 대신 절대 값을 사용하려고 시도 했습니까? 그것은 일관성있게 만들어야합니다. –

레이아웃 속성을 인라인으로 설정하거나 0으로 설정하면 Gmail 모바일 및 Outlook Mobile과 같은 다른 모바일 이메일 클라이언트가 올바르게 렌더링되지 않습니다. 아래는 내 문제를 해결하는 것으로 보였고 인라인 스타일링 만 렌더링하는 클라이언트의 경우 간격이 어쨌든 있어야했던대로였습니다. 나는 마지막 단락에 약간의 추가 공백이 있었으므로이 문제를 해결하는 것처럼 보이는 줄 바꿈이 있음을 알았습니다. 그래서 모든 라인은 데스크톱에서와 같이 단단하게 보입니다. 희망이 사람을 도움이됩니다.

<style type="text/css"> 
    .sigRow { margin: 1px; font-size:9pt; font-family:"Arial",sans-serif;} 
</style> 
<p class="sigRow">One line</p> 
<p class="sigRow">Two line</p> 
<br>

출처

2017-12-20 18:32:50

모바일 전자 메일 클라이언트에 표시 할 때 텍스트의 행 높이가 너무 많음

답변

관련 문제