幽灵下划线甚至文本装饰都没有

Question

我知道这个顶部已经被讨论了很多，我并没有从我的搜索中看到任何类似的案例。也许我错了。我觉得这太不可思议了，所以我想知道是否有人能给我一些启示。

我在两张桌子下面有一个嵌套另一个。一个带有下划线，一个没有。请参阅下面的代码。据我了解，即使外表的下划线样式有效（应该是没有文字的缘故），它应该在嵌套表格下方显示一行（注意表格有填充内）。但是这条线看起来像是在嵌套表上设置的......

<table width="640" align="center" bgcolor="#000001">
  <tr>
    <td style="color:#ff0000; text-decoration:underline;">
      <table width="100%">
        <tr>
          <td style="color:#ffffff; font-size:14px; text-decoration:none; padding:30px 0;" align="center">
            <a href="https://google.com" style="color:#ffffff; text-decoration:none">Text here</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

如果你在外表上添加一个大字体大小，那就太疯狂了。你会得到下面的结果。

<table width="640" align="center" bgcolor="#000001">
  <tr>
    <td style="color:#ff0000; text-decoration:underline; font-size: 100px;">
      <table width="100%">
        <tr>
          <td style="color:#ffffff; font-size:14px; text-decoration:none; padding:30px 0;" align="center">
            <a href="https://google.com" style="color:#ffffff; text-decoration:none">Text here</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

如果您认为这对您来说更容易，我在CodePen 上有代码。

顺便说一句，幽灵下划线在 Firefox 中是 RED 而在 Chrome 中是 WHITE。如果您对此也有任何想法，那也让我感到困惑。请告诉我。

有什么想法吗？

Answer 1

问题出在父 td 标签上。 请尝试以下操作：

<table width="640" align="center" bgcolor="#000001">
  <tr>
    <td style="color:#ff0000; font-size: 100px;">    <!--this line was the problem -->
      <table width="100%">
        <tr>
          <td style="color:#ffffff; font-size:14px; text-decoration:none; padding:30px 0;" align="center">
            <a href="https://google.com" style="color:#ffffff; text-decoration:none">Text here</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

我知道这可能不是预期的行为，如果它是 div 标签的层次结构，但已知表格会与 CSS 样式混淆。

希望这会有所帮助！

Answer 2

Temani 明白了这一点。 cmets 中的这两个链接（1、2）很好地解释了这个问题。我没有意识到underline 不仅有问题，text-decoration 本身也有问题。

可以用下面这样的简单代码来解释。如果不是浮动、定位、内联块或内联表，文本装饰将“传播”到任何内联子项中。

<div style="color:#ff0000; text-decoration:underline;font-size: 100px; ">
  <div>
    <a href="https://google.com" style="color:#000000; text-decoration:none;"
      >Text here</a
    > aaa
  </div>
</div>

来自reference：

当指定或传播到内联元素时，它会影响该元素生成的所有框，并且会进一步传播到任何拆分内联的流入块级框（参见第 9.2.1.1 节）。但是，在 CSS 2.1 中，装饰是否传播到块级表中是未定义的。对于建立内联格式化上下文的块容器，装饰被传播到一个匿名内联元素，该元素包装了块容器的所有流入内联级子项。对于所有其他元素，它会传播到任何流入的子元素。 请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到内联块和内联表等原子内联级后代的内容。

所以对于我来说，我可以在<a> 标签上设置inline-block，或者在嵌套的<table> 上设置inline-table。