이메일 클라이언트 <td>를위한 이메일 뉴스 레터 머리글 및 바닥 글 정렬

debugcn 에 게시 Dev

제이크 폴

이 절반 완성 된 이메일 뉴스 레터 템플릿을 상속 받았지만 모든 다양한 이메일 클라이언트에서 머리글과 바닥 글을 일관되게 정렬하는 데 제한된 코딩 기술로 인해 많은 문제가 있습니다. 우선, 바닥 글은 머리글처럼 제대로 정렬되지 않고 맨 위 행과 맨 아래 이미지 사이에 1 픽셀 간격을 계속 표시하고 다양한 이메일 클라이언트에서 계속 이동합니다.

전체 스크립트는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <meta content="width=device-width, initial-scale=1.0;" name="viewport">
    <meta content="telephone=no" name="format-detection">
    <title></title>
</head><!-- MESSAGE SUBJECT -->
<!-- BODY -->
<!-- Set message background color (twice) and text color (twice) -->
<body bgcolor="#F0F0F0" style=
"border-collapse: collapse; border-spacing: 0; width: 100% !important; height: 100% !important; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #000000; min-width: 100%; background-color: #ffd530; margin: 0; padding: 0;"
text="#000000">
    <style type="text/css">
    a:hover { color: #127DB3 !important; }
    .footer a:hover { color: #999999 !important; }
    >
    </style>
    <table align="center" border="0" cellpadding="0" cellspacing="0" style=
    "border-collapse: collapse !important; border-spacing: 0; width: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;"
    width="100%">
        <tr>
            <td align="center" bgcolor="#FFD530" style=
            "border-collapse: collapse !important; border-spacing: 0; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;"
            valign="top">
                <!-- WRAPPER -->
                <!-- Set wrapper width (twice) -->
                <table align="center" border="0" cellpadding="0" cellspacing=
                "0" style=
                "border-collapse: collapse !important; border-spacing: 0; width: inherit; max-width: 600px; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;"
                width="560">
                    <tr>
                        <td align="center" style=
                        "border-collapse: collapse !important; border-spacing: 0; width: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0px 6.25% 20px;"
                        valign="top"></td>
                        <td style=
                        "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;">
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                    <tbody>
                        <tr>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top" width="">
                                <a href=
                                "http://www.tower-london.com/delivery-options/"
                                style=
                                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #127DB3;"
                                title=""><img alt="Tower-London" border="none"
                                src=
                                "http://www.tower-london.com/media/custom/newsletter/template2/Free.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"
                                title="Right-click here to download pictures"
                                width=""></a>
                            </td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top"><img alt="" border="none" src=
                            "http://www.tower-london.com/media/custom/newsletter/template/followus.jpg"
                            style=
                            "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></td>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top">
                                <a href=
                                "https://www.facebook.com/towerlondonfootwear"
                                style=
                                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
                                title=""><img alt="" border="none" src=
                                "http://www.tower-london.com/media/custom/newsletter/template/facebook.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
                            </td>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top">
                                <a href="https://twitter.com/TowerLondon"
                                style="-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
                                title=""><img alt="" border="none" src=
                                "http://www.tower-london.com/media/custom/newsletter/template/twitter.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
                            </td>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top" width="">
                                <a href="http://instagram.com/towerlondon"
                                style=
                                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
                                title=""><img alt="" border="none" src=
                                "http://www.tower-london.com/media/custom/newsletter/template/instagram.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
                            </td>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top"><img alt="" border="none" src=
                            "http://www.tower-london.com/media/custom/newsletter/template/towerlogo.jpg"
                            style=
                            "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></td>
                        </tr>
                    </tbody>
                </table><!-- End of Row 7 -->
                <!-- Row 7 -->
                <table align="center" bgcolor="white" style=
                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;">
                <tbody>
                        <tr>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top">
                                <a href="http://www.tower-london.com/" style=
                                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
                                title=""><img alt="" border="none" src=
                                "http://www.tower-london.com/media/custom/newsletter/template/website.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

좋은 영혼이이 문제를 해결하는 데 도움이된다면 영원히 감사 할 것입니다!

랄지 타 다니

나는 테이블에 tbody로 변경하고 테이블의 속성을 추가했습니다.

<body bgcolor="#F0F0F0" style=
"border-collapse: collapse; border-spacing: 0; width: 100% !important; height: 100% !important; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #000000; min-width: 100%; background-color: #ffd530; margin: 0; padding: 0;"
text="#000000">
    <style type="text/css">
    a:hover { color: #127DB3 !important; }
    .footer a:hover { color: #999999 !important; }
    
    </style>
    <table align="center" border="0" cellpadding="0" cellspacing="0" style=
    "border-collapse: collapse !important; border-spacing: 0; width: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;"
    width="100%">
        <tr>
            <td align="center" bgcolor="#FFD530" style=
            "border-collapse: collapse !important; border-spacing: 0; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;"
            valign="top">
                <!-- WRAPPER -->
                <!-- Set wrapper width (twice) -->
                <table align="center" border="0" cellpadding="0" cellspacing=
                "0" style=
                "border-collapse: collapse !important; border-spacing: 0; width: inherit; max-width: 600px; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;"
                width="560">
                    <tr>
                        <td align="center" style=
                        "border-collapse: collapse !important; border-spacing: 0; width: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0px 6.25% 20px;"
                        valign="top"></td>
                        <td style=
                        "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;">
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top" width="">
                                <a href=
                                "http://www.tower-london.com/delivery-options/"
                                style=
                                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #127DB3;"
                                title=""><img alt="Tower-London" border="none"
                                src=
                                "http://www.tower-london.com/media/custom/newsletter/template2/Free.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"
                                title="Right-click here to download pictures"
                                width=""></a>
                            </td>
                        </tr>
                    </tbody>
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top"><img alt="" border="none" src=
                            "http://www.tower-london.com/media/custom/newsletter/template/followus.jpg"
                            style=
                            "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></td>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top">
                                <a href=
                                "https://www.facebook.com/towerlondonfootwear"
                                style=
                                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
                                title=""><img alt="" border="none" src=
                                "http://www.tower-london.com/media/custom/newsletter/template/facebook.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
                            </td>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top">
                                <a href="https://twitter.com/TowerLondon"
                                style="-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
                                title=""><img alt="" border="none" src=
                                "http://www.tower-london.com/media/custom/newsletter/template/twitter.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
                            </td>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top" width="">
                                <a href="http://instagram.com/towerlondon"
                                style=
                                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
                                title=""><img alt="" border="none" src=
                                "http://www.tower-london.com/media/custom/newsletter/template/instagram.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
                            </td>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top"><img alt="" border="none" src=
                            "http://www.tower-london.com/media/custom/newsletter/template/towerlogo.jpg"
                            style=
                            "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></td>
                        </tr>
                    </tbody>
                </table><!-- End of Row 7 -->
                <!-- Row 7 -->
                <table align="center" bgcolor="white" border="0" cellpadding="0" cellspacing="0" style=
                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;">
                <tbody>
                        <tr>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top">
                                <a href="http://www.tower-london.com/" style=
                                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
                                title=""><img alt="" border="none" src=
                                "http://www.tower-london.com/media/custom/newsletter/template/website.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
</body>

https://jsfiddle.net/78aw8jkm/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-13

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

이메일 클라이언트 <td>를위한 이메일 뉴스 레터 머리글 및 바닥 글 정렬

이메일 클라이언트 <td>를위한 이메일 뉴스 레터 머리글 및 바닥 글 정렬

Vaadin 기본 레이아웃 : 고정 머리글 및 바닥 글 + 스크롤 가능한 콘텐츠

컨트롤러에 머리글, 메뉴 및 바닥 글 포함

라텍스 이미지 머리글 및 바닥 글

테이블 및 div 내의 고정 머리글 및 바닥 글?

Excel 파일의 머리글 및 바닥 글 텍스트 교체

Excel 파일의 머리글 및 바닥 글 텍스트 교체

머리글 및 바닥 글이있는 Javascript (클라이언트 측)를 사용하여 PDF 생성

고정 HTML 머리글 및 바닥 글이있는 페이지 레이아웃, 유연한 콘텐츠

머리글 및 바닥 글 데이터 추가

Winnovative, PdfConverter 머리글 및 바닥 글 높이를 동적으로 설정

부트 스트랩 머리글 및 바닥 글이 모바일 장치에 링크를 표시하지 않음

레일이있는 각도 로딩 머리글 및 바닥 글 두 번

동일한 머리글 / 바닥 글이 포함 된 정적 HTML 페이지

슬라이드 마스터를 사용하여 PowerPoint 2013 슬라이드의 머리글 및 바닥 글 업데이트

유동적 머리글, 바닥 글 및 3 열 CS 레이아웃 (크로스 브라우저)

머리글 바닥 글이있는 일반 recycleview 어댑터

고정 머리글 및 바닥 글이있는 전체 페이지 높이

사이트 최적화 및 머리글 / 바닥 글 페이지

현재 CSS Flexbox 레이아웃에 바닥 글 DIV 및 머리글 DIV 추가

머리글 / 바닥 글 및 스크롤 가능한 콘텐츠가있는 HTML / CSS 사이드 바

Prestashop에서 CSS 리소스를 머리글에서 바닥 글로 이동

컨테이너 내부에 머리글, 바닥 글 및 스크롤 본문이있는 유연한 CSS 레이아웃

그리드 레이아웃-머리글과 바닥 글에서 전체 높이 나머지가있는 사이드 바 및 메인 콘텐트 할당?

기본 머리글-가운데-바닥 글 레이아웃 Vaadin

CSS를 사용하여이 머리글 / 내용 / 바닥 글 / 메뉴 레이아웃을 만드는 방법은 무엇입니까?

머리글 및 바닥 글이 페이지 콘텐츠를 스크롤 할 수 없도록 수정 했습니까?

rmarkdown 및 pandoc에 대한 YAML 메타 블록의 머리글 및 바닥 글

부트 스트랩 바닥 글 메뉴

내용 위의 머리글 및 바닥 글 ...이 문제를 어떻게 해결할 수 있습니까?