幽灵下划线连文字装饰都是none

Question

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

我有下面两个 table 一个嵌套另一个。一个设置了下划线，一个没有。请参阅下面的代码。据我了解，即使外table上的下划线样式有效（应该是因为没有文本），它应该在嵌套[=47]下面显示一条线=] （注意table里面有padding）。但是这条线看起来像是设置在嵌套的 table...

<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。你会得到以下结果。

<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 明白了。评论中的那两个链接（, ）很好地解释了这个问题。我没有意识到 underline 不仅错了， text-decoration 本身也错了。

可以用如下简单的代码来解释。如果文本装饰没有浮动、定位、内联块或内联-table.

，则文本装饰将 "spread" 放入任何内联子元素中

<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：

When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). But, in CSS 2.1, it is undefined whether the decoration propagates into block-level tables. For block containers that establish an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container. For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

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

幽灵下划线连文字装饰都是none

Ghost underline even text-decoration is none

html

css

underline