html 이메일이 Safari에서만 깨졌습니다.

Question

첨부 된 스크린 샷을 보면 HTML 이메일 용으로 만든 디자인을 볼 수 있습니다. Screen Shot

나는 실행 한 모든 테스트에서 다음이 서로 나란히 한 행에 있습니다.

로고, "VIP Edition"및 모든 거래보기 버튼.

사파리에서는 VIP 에디션과 모든 혜택보기가 행렬과 로고 센터로 떨어집니다. 아무도 나 에게이 동작을 설명 할 수 있습니까? 나는 왜 전자 메일의 나머지 부분에 대해 발생하지 않는지 이해하기 위해 고투하고 있으며, 내 대답을 찾기 위해이 질문을 구술하는 방법을 생각할 수 없습니다.

Answer 1

해당 섹션에 대해서도 코드를 보는 것이 좋습니다.

하지만 이전에 이걸 보았습니다. 이걸 보면 보통 대다수의 td에 align = center가있는 두 개의 정렬 된 테이블이 있습니다.

예를 들어, VIP Edition 로고는 왼쪽 정렬 테이블에 있고 모든 거래보기 버튼은 오른쪽 정렬 테이블에 있습니다. 정렬 된 테이블 모두에 정렬 속성이 설정되어 있지 않은지 확인하십시오.

이 기능을 해제하면 문제가 해결됩니다. 모바일 용 요소를 가운데에 맞춰야하는 경우 align = center를 위로 설정하십시오.

Answer 2

다시 시작 했으므로 열의 너비와 관련이 있다고 가정 할 수 있습니다. 유용하다고 생각했던 post을 발견했습니다.

프레임 워크 섹션에서 나는 몇 가지를 시도하기로 결정했습니다. 제가 처음 시도한 것은 Zurb Foundations Ink였습니다. 왜냐하면 저는 과거에 Zurb Foundation을 사용했기 때문입니다. 그러나, 그들의 지원 클라이언트는 내 좋아하는 것에 대해 comprehensive enough가 아니었다. 그들은 다른 브라우저에 대한 언급을하지 않으며 제 의견으로는 중요합니다. 지난 달에 많은 테스트를 했어. 시간이 지나면 더 철저히 테스트 할 것입니다. 적어도 미디어 쿼리를 사용하지 않는 Gmail에서 반응하는 버전을 제공합니다.

모든 플랫폼에서 작동했던 것을 원했던 나는 Acid의 반응 형 템플릿에 대한 전자 메일을 보냈습니다. 멋져 보이고 Acid on Email을 사용하여 테스트 했으므로 문제가 해결 될 것이라고 생각했습니다. 그들의 웹 사이트는 유용한 유능한 정보로 가득합니다. 그러나 템플릿은 Safari에서 작동하지 않았고 처음 시작한 드롭 다운 문제가있었습니다. 그들은 그곳에서 작동한다고 주장하지는 않지만 테스트 서비스를 제공함에 따라 사용하는 모든 플랫폼에서 작동 할 것이라고 기대했습니다.

그런 다음 AntWorts 솔루션으로 옮겼습니다. 이는 초기 테스트에서 효과적이었고, 필자의 요구에 적응하는 것이 매우 쉽고 결국 템플릿 중 하나에서 명확하게 설명 된 방법론을 사용하여 추가 열을 추가하는 것이 었습니다.

최종 템플릿에는 1,2,3,4 열 그리드가 있는데, 이는 유체 부분 적응 형으로 반응합니다. 앞으로 사람들에게 내 조언은이 상용구로 시작하는 것입니다. 저는 전체 템플릿을 처음부터 다시 작성하고 시작하기 위해 다른 상용구의 문제를 해결하는 데 시간의 절반이 걸렸습니다.