Question

我在自己的表中有一个图像作为分隔符。它工作正常是8但是在8.5中，包括特色图像在内的图像显示宽度为50％。

Lotus注意到8.0 -

Lotus注意到8.5 -

请注意，在第一个中，绿色分隔符图像（一个大JPEG）是正确的宽度和高度（由样式和宽度/高度属性定义）。

然而在8.5中，它完全忽略了所有这些值，并且几乎将图像大小减半。

修改 - 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document Here</title>
</head>
<body>

  <center style="width: 100%; min-width: 580px;"><!-- header row -->
    <table class="container header" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;">
      <tbody>
        <tr align="left" style="vertical-align: top; text-align: left; padding: 0;">
          <td align="center" class="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" valign="top">
          <center style="width: 100%; min-width: 580px;">
          <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;"><!-- logo & link -->
            <tbody>
              <tr align="left" style="vertical-align: top; text-align: left; padding: 0;">
                <td align="left" class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0px 0px;" valign="top">
                <table bgcolor="#110617" class="twelve columns bg-black" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; color: #fff; background-color: #110617; margin: 0 auto; padding: 0;">
                  <tbody>
                    <tr align="left" style="vertical-align: top; text-align: left; padding: 0;">
                      <td align="left" class="six sub-columns text-pad" style="vertical-align: middle; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; text-align: left; min-width: 0px; width: 50%; color: #fff; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 13px; margin: 0; padding: 10px;" valign="middle"><a href="http://www.domain.com/?ref=mailshot" style="font-size: 12px; color: #fff; text-decoration: underline;">View in browser</a></td>
                      <td align="right" class="six sub-columns" style="text-align: right; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; min-width: 0px; width: 50%; color: #fff; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 13px; margin: 0; padding: 10px 10px 10px 0px;" valign="top">Logo Here</td>
                    </tr>
                  </tbody>
                </table>
                </td>
              </tr>
              <!-- / logo & link --><!-- separator -->
              <tr align="left" style="vertical-align: top; text-align: left; padding: 0;">
                <td align="left" class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0px 0px;" valign="top">
                <table bgcolor="#110617" class="twelve columns bg-black" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; color: #fff; background-color: #110617; margin: 0 auto; padding: 0;">
                  <tbody>
                    <tr align="left" style="vertical-align: top; text-align: left; padding: 0;">
                      <td align="left" class="twelve sub-columns last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; min-width: 0px; width: 100%; color: #fff; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 13px; margin: 0; padding: 0px 0px 10px;" valign="top"><img align="none" alt="Please load images for the best effect" height="55" src="http://i.imgur.com/LyGyv5v.png" style="float: none; width: 580px; height: 55px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; clear: both; display: block;" width="580" /></td>
                    </tr>
                  </tbody>
                </table>
                </td>
              </tr>
              <!--/ separator --><!-- post title -->
              <tr align="left" style="vertical-align: top; text-align: left; padding: 0;">
                <td align="left" class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0px 0px;" valign="top">
                <table bgcolor="#110617" class="twelve columns bg-black" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; color: #fff; background-color: #110617; margin: 0 auto; padding: 0;">
                  <tbody>
                    <tr align="left" style="vertical-align: top; text-align: left; padding: 0;">
                      <td align="left" class="twelve sub-columns text-pad last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; min-width: 0px; width: 100%; color: #fff; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 13px; margin: 0; padding: 10px 0px 10px 10px;" valign="top">
                      <h1 align="left" class="lead" style="color: #fff; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: bold; text-align: left; line-height: 25px; word-break: normal; font-size: 22px; margin: 0; padding: 0;">Heading Here</h1>
                      </td>
                    </tr>
                  </tbody>
                </table>
                </td>
              </tr>
              <!-- / post title -->
            </tbody>
          </table>
          </center>
          </td>
        </tr>
      </tbody>
    </table>
  </center>

</body>
</html>

这是JS小提琴 - http://jsfiddle.net/xaum0t9t/

你知道为什么会这样吗？

Lotus注意到8.5图像的宽度和高度

0 个答案: