Question

我正在使用表来构建HTML电子邮件。

当我以90％缩放（在Chrome上）查看页面时，我的表格看起来很好。但当我缩放到100％以上时，我的桌子会移动几个像素，我不知道为什么。

90％缩放：

100％放大（及以后）：

我希望每个td都有max-height: 286px; max-width:332px;并设置了原因，但它仍然超出了这些参数，为什么？

＆＃13;

<table bgcolor="#0a1219" border="0" cellpadding="0" cellspacing="0" style="max-width:692px;background-color:#0a1219;" width="692">
  <tbody>
    <tr>
      <!------------->
      <!-- IMAGE 1 -->
      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; max-height: 286px; max-width:332px;" valign="bottom">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <!-- IMAGE -->
              <td align="right" style="font-family:'Arial',Helvetica,sans-serif;">
                <a href="#" target="_blank">
                  <img alt="Image-1" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/block-1.png" style="display:block;border:0px;font-family:Helvetica,Arial,sans-serif;color:#ffffff" height="284">
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <!------------->
      <!-- IMAGE 2 -->
      <td align="left" style="font-family:Arial,Helvetica,sans-serif;padding-right:22px; max-height: 286px; max-width:332px;" valign="bottom">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <!--ROW 1 IMAGE -->
            <tr>
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; background-color:#00adf2;">
                <img alt="Speech marks" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/speech.png" style="display:block;border:0px;font-family:Arial, Helvetica,sans-serif;color:#ffffff; padding-top: 3px;" width="310">
              </td>
            </tr>
            <!--ROW 1 TEXT -->
            <tr>
              <td align="center" style="background-color:#00adf2; font-family:Arial;font-size:14px;line-height:20px;color:#fff; text-align: center;">
                Faceate volorunt uta quo moditas
                <br> et labo. Comnima iorehent hit est
                <br> am vit elit volores cimpossime
                <br> serchit, oditiis rehenis volor
                <br> sequisqui ut late cus. Faceate
                <br> volorunt uta quo moditas et labo.
                <br> Comnima ioreh.
              </td>
            </tr>
            <tr>
              <!--ROW 3 LINE -->
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding: 22px;background-color:#00adf2;vertical-align:top;">
                <!-- NESTED TABLE -->
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; width: 100%;" width="100%">
                        <!-- TABLE FOR LINE -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                          <tbody>
                            <tr>
                              <td align="center" bgcolor="#fff" height="3" style="height:4px;width:50px;font-size:0px;" width="50"></td>
                            </tr>
                          </tbody>
                        </table>
                        <td style="padding-bottom:18px;"></td>
                        <!-- TABLE FOR LINE END -->
                      </td>
                      <!-- LINE END -->
                    </tr>
                  </tbody>
                </table>
                <!-- NESTED TABLE END -->
              </td>
            </tr>
          </tbody>
        </table>
      </td>

      <!-- FIRST ROW CLOSE -->
    </tr>
  </tbody>
</table>

＆＃13;

修改：

从文字中删除一行：

Answer 1

在这里我尝试你的代码在Internet Explorer和firefox x64，我没有铬（对我来说是没用的，因为是）！ 这里只是一个valign问题你怎么看按下按钮Run COde Snippet

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus® editplus.com DA BEST EDITOR IN THE WORLD FROM SOUTH KOREA">
  <title>MY STUPID FIX</title>
 </head>
 <body>
  <table bgcolor="#0a1219" border="0" cellpadding="0" cellspacing="0" style="max-width:692px;background-color:#0a1219;" width="692">
  <tbody>
    <tr>
      <!------------->
      <!-- IMAGE 1 -->
      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; max-height: 286px; max-width:332px;" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <!-- IMAGE -->
              <td align="right" style="font-family:'Arial',Helvetica,sans-serif;">
                <a href="#" target="_blank">
                  <img alt="Image-1" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/block-1.png" style="display:block;border:0px;font-family:Helvetica,Arial,sans-serif;color:#ffffff" height="284">
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <!------------->
      <!-- IMAGE 2 -->
      <td align="left" style="font-family:Arial,Helvetica,sans-serif;padding-right:22px; max-height: 286px; max-width:332px;" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <!--ROW 1 IMAGE -->
            <tr>
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; background-color:#00adf2;">
                <img alt="Speech marks" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/speech.png" style="display:block;border:0px;font-family:Arial, Helvetica,sans-serif;color:#ffffff;" width="310">
              </td>
            </tr>
            <!--ROW 1 TEXT -->
            <tr>
              <td align="center" style="background-color:#00adf2; font-family:Arial;font-size:14px;line-height:20px;color:#fff; text-align: center;">
                Faceate volorunt uta quo moditas
                <br> et labo. Comnima iorehent hit est
                <br> am vit elit volores cimpossime
                <br> serchit, oditiis rehenis volor
                <br> sequisqui ut late cus. Faceate
                <br> volorunt uta quo moditas et labo.
                <br> Comnima ioreh.
              </td>
            </tr>
            <tr>
              <!--ROW 3 LINE -->
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding: 22px;background-color:#00adf2;vertical-align:top;">
                <!-- NESTED TABLE -->
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; width: 100%;" width="100%">
                        <!-- TABLE FOR LINE -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                          <tbody>
                            <tr>
                              <td align="center" bgcolor="#fff" height="3" style="height:4px;width:50px;font-size:0px;" width="50"></td>
                            </tr>
                          </tbody>
                        </table>
                        <td style="padding-bottom:18px;"></td>
                        <!-- TABLE FOR LINE END -->
                      </td>
                      <!-- LINE END -->
                    </tr>
                  </tbody>
                </table>
                <!-- NESTED TABLE END -->
              </td>
            </tr>
          </tbody>
        </table>
      </td>

      <!-- FIRST ROW CLOSE -->
    </tr>
  </tbody>
</table>
 </body>
</html>

放大和缩小页面时表略有中断

1 个答案: