문제는 이 요약 이메일의 해당 섹션을 생성하는 마크업에 있습니다. 다음은 Outlook 2019 (Windows 10)의 스크린샷입니다:
테스트해본 모든 데스크톱 버전의 Outlook(Outlook 2010 ~ Outlook 2019)에서 이 문제를 확인하고 있습니다. Litmus에서 제공되는 테스트는 Windows 10에서 수행됩니다. 이러한 Outlook 버전들의 공통점은 모두 Microsoft Word를 사용하여 이메일을 렌더링한다는 점입니다.
Microsoft Word는 Discourse 마크업에 포함된 CSS float 규칙을 처리할 수 없습니다. 이로 인해 "좋아요"와 “답변” 수가 아이콘 옆에 플로팅되는 대신 아이콘 아래에 표시되고 있습니다. 세로 정렬 문제는 렌더링 엔진이 이메일의 CSS를 적용하려는 시도로 마크업에 추가하는 일부 p 요소의 결과입니다. Outlook은 이메일의 CSS를 재현하려는 시도로 p 요소에 패딩을 추가합니다.
이 문제에 대한 CSS 솔루션을 찾기 위해 시간을 들였지만, 이것이 가능하다고 생각하지 않습니다. 이 문제를 수정하려면 이메일의 해당 섹션 마크업을 CSS 대신 테이블을 사용하도록 변경해야 합니다.