Подчеркивание призрака, даже текстовое оформление

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, но БЕЛЫЙ в Chrome. Это также смущает меня, если у вас есть идеи по этому поводу. Пожалуйста, скажите мне.

Есть идеи?

Answer 1

Темани получил точку. И эти две ссылки ( 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>

Из ссылки :

При указании или распространении на встроенный элемент влияет на все блоки, сгенерированные этим элементом и , далее распространяются на любые блоки уровня блока в потоке, которые разделяют строку (см. раздел 9.2.1.1). Но в CSS 2.1 не определено, распространяется ли оформление на таблицы уровня блока. Для контейнеров блоков, которые устанавливают sh контекст встроенного форматирования, декорации распространяются на анонимный встроенный элемент, который оборачивает все входящие дочерние элементы встроенного уровня контейнера блока. Для всех остальных элементов он распространяется на любые дочерние потоки. Обратите внимание, что текстовые декорации не распространяются ни на плавающих и абсолютно позиционированных потомков, ни на содержимое атомов атома c встроенных потомков уровня, таких как встроенные блоки и встроенные таблицы.

Поэтому для моего случая я могу установить inline-block для тега <a> или установить inline-table для вложенного <table>.

Answer 2

Проблема в родительском теге 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.

Надеюсь, это поможет!