Gmail：元素大于内联 CSS 样式中定义的大小答案

【问题标题】：Gmail: elements bigger than the size defined in inline css stylesGmail：元素大于内联 CSS 样式中定义的大小
【发布时间】：2014-11-12 12:52:59
【问题描述】：

所以我正在编写时事通讯的 html，并且由于限制，我正在使用内联样式，所以我的“表格布局”被破坏了，因为元素的大小大于定义的大小。我意识到定义了一个高度为 170px 的元素，并且在其中定义了一个高度为 170px 的标签，那么为什么使用检查我可以看到它有 172px，我认为 Gmail 忽略了一些东西。

我制作了一个 gif 在检查器中显示：http://i.imgur.com/VqNsxrY.gif

我的 JSfiddle 与我的 html：http://jsfiddle.net/wtkd/ygfn6qka/ （带有马里奥图像的方框显示布局中断的位置） 如果你不想在 JSfiddle 中看到：

  <table width="700" align="center" style="background-image: url('http://www.image.test.com/images/bg.jpg'); background-color: #ededed; background-position: center top; background-repeat: no-repeat; margin:0;padding:0;padding: 0; width: 700px; margin: 0 auto;">
<tr width="600" style="border-collapse:collapse;border-spacing:0;">
  <td style="border-collapse:collapse;border-spacing:0;">
    <table width="600" align="center" border="0" cellpadding="0" cellspacing="0" style=
    "border-collapse:collapse;border-spacing:0;">
      <thead width="600" style="border-collapse:collapse;border-spacing:0;">
        <tr width="600"height="150" style="border-collapse:collapse;border-spacing:0;">
          <th width="600" style="border-collapse:collapse;border-spacing:0;">
            <img src="http://www.image.test.com/images/header.png" width="600" height="151">
          </th>
        </tr>
        <tr height="104">
          <th style="height:104px; border-bottom: 5px #ededed solid;">
            <img src="http://www.image.test.com/images/update.png" width="600" height="104">
          </th>
        </tr>
      </thead>
      <tbody width="600">
        <tr height="170">
          <th height="170">
            <a style="height:170px;" href="http://www.test.com/motorola-droid-turbo/65466-moto-maxx-chega-oficialmente-brasil-preco-r-xxxx.htm" target="_blank"><img src="http://www.image.test.com/images/moto-maxx.png" width="600" height="170"></a>
          </th>
        </tr>
        <tr height="180">
          <th height="170">
            <a style="height:170px;" href="http://www.test.com/jogos/65442-explosivo-trailer-gameplay-gta-v-confirma-modo-primeira-pessoa.htm" target="_blank"><img src="http://www.image.test.com/images/gta-v.png" width="600" height="170"></a>
          </th>
        </tr>
        <tr>
          <table width="600" height="340" align="center" border="0" cellpadding="0" cellspacing="0" style=
            "border-collapse:collapse;border-spacing:0;">
            <tr>
              <th height="170" style="height: 170px; width: 200px;border-collapse:collapse;border-spacing:0;">
                <a style="height: 170px; width: 200px;border-collapse:collapse;border-spacing:0;" href="http://www.test.com/moto-x/65400-analise-review-smartphone-motorola-novo-moto-x-2014.htm" target="_blank"><img src="http://www.image.test.com/images/moto-x.png" width="200" height="170"></a>
              </th>
              <th height="170" style="height: 170px; width: 200px;border-collapse:collapse;border-spacing:0;">
                <a style="height: 170px; width: 200px;border-collapse:collapse;border-spacing:0;" href="http://www.test.com/iphone-6/64640-analise-apple-iphone-6-review.htm" target="_blank"><img src="http://www.image.test.com/images/iphone.png" width="200" height="170"></a>
              </th>
              <th rowspan="2" height="340" style="width: 200px; height: 340px;border-collapse:collapse;border-spacing:0;">
                <a style="width: 200px; height: 340px;border-collapse:collapse;border-spacing:0;" href="http://www.test.com/jogos/65339-personagens-super-mario-viram-brindes-mcdonalds-brasileiro.htm" target="_blank"><img src="http://img.elo7.com.br/product/original/62C89A/painel-mario-bros.jpg" width="200" height="340"></a>
              </th>
            </tr>
            <tr width="400" height="170">
              <th height="170" colspan="2" style="border-collapse:collapse;border-spacing:0;">
                <a style="width:400px;height:170px;border-collapse:collapse;border-spacing:0;" href="http://www.test.com/celular/65283-dinossauros-9-celulares-marcaram-epoca.htm" target="_blank"><img src="http://cdn.bgr.com/2013/11/super-mario-3d-world.jpg" width="400" height="170"></a>
              </td>
            </tr>
          </table>
        </tr>
        <tr>
          <table width="700" align="center" border="0" cellpadding="0" cellspacing="0" style=
              "border-collapse:collapse;border-spacing:0;background:#ededed;">
            <tr align="center" height="170" style="border-collapse:collapse;border-spacing:0;">
              <th height="170">
                <a href="http://www.test.com/cinema/65416-30-filmes-2015-voce-querer-ver-cinemas-estreias-lancamentos.htm" target="_blank"><img src="http://www.image.test.com/images/filmes.png" width="600" height="170"></a>
              </th>
            </tr>
            <tr height="180" align="center" style="border-collapse:collapse;border-spacing:0;">
              <td colspan="2" style="width:400px;height:170px;border-collapse:collapse;border-spacing:0;">
                <img src="http://www.image.test.com/images/grupo-nzn.jpg" width="600" height="180">
              </td>
            </tr>
          </table>
        </tr>
      </tbody>
    </table>
  </td>
</tr>

有人可以帮忙吗？

【问题讨论】：

标签： html css gmail html-email

【解决方案1】：

您需要将display:block; 内嵌在所有img 标签上。

【讨论】：

【解决方案2】：

这与<a> 的显示方式有关。将他们的 display 属性更改为 block （单独或全局使用样式，我很想知道为什么不允许您使用它）成功了：running demo

<style>
    a {
        display : block;        
    }
</style>

【讨论】：

在 jsFiddle 中它可以工作，但在 Gmail 中不能正常工作，Gmail 不接受
它对我来说也适用于内联样式...你确定你已经把它放在所有中了吗？