CSSで指定がないのに、勝手に text-decoration が入ってしまう症状

実現したいこと

WordPressのブログで、指定がないのにアンダーラインが入ってしまう症状に出くわしました。

このアンダーラインをなくしたいです。

発生している問題

たとえばこちらのページです。
https://yaemaru.net/heparinoid/

２つめの<h2>が「ヒルドイドと同じ薬は市販で売っている」になりますが、
それ以降すべてのテキストにアンダーラインが入ってしまっています。

アンダーラインの位置はCSSのtext-decoration: underline;に見えますが、以下のことを確認してもどこにもそのような指定はございません。

確認したこと

以下アンダーラインが入りうるコードの有無を確認しましたが、いずれのコードもありませんでした。

・text-decoration: underline;→なし
・afterなど疑似要素→なし
・<span>などアンダーライン専用の要素→なし
・HTML直書き→なし

また、スマホから確認すると、2回目の<h2>タグ以下の文章が全て中央揃えになってしまっているので、<h2>が何か影響しているようにも思われます。

原因、対策ご存じの方がいらっしゃいましたら教えていただけないでしょうか。

行動規範の内容に同意します

回答2件

ベストアンサー

ins 要素の終了タグがないことで、 ins 要素がセクション全体を囲んでいるからです。ins 要素にはユーザーエージェントスタイルシートによって text-decoration: underline が指定されており、これが子孫要素にまで影響しています。text-decoration プロパティは継承されませんが、その影響は子孫全体へ及びます。そのため、質問文にあるように「どこにも下線にするための指定がない」ように見えます。

§ 2. Line Decoration: Underline, Overline, and Strike-Through

When specified on or propagated to an inline box, that box becomes a decorating box for that decoration, applying the decoration to all its fragments. The decoration is then further propagated to any in-flow block-level boxes that split the inline (see CSS2.1 section 9.2.1.1). When specified on or propagated to a block container that establishes an inline formatting context, the decorations are propagated to an anonymous inline box that wraps all the in-flow inline-level children of the block container. When specified on or propagated to a ruby container, the decorations are propagated only to the ruby base. For all other box types, the decorations are propagated to all in-flow children.

これを修正すると、以下のようになります (動作確認用リンク)。

HTML
1<ins class="adsbygoogle"
2     style="display:block"><h2><span class="ez-toc-section" id="i-4">ヒルドイドと同じ薬は市販で売っている</span></h2></ins>

投稿2019/11/24 08:49

編集2019/11/24 09:00

s8_chu

総合スコア14731

marusankakun

2019/11/24 11:23

感激。よくご存じですね。詳しくないタグをムリして使っちゃダメでしたね。ありがとうございました！

行動規範の内容に同意します

HTMLの構文がおかしい箇所があるので、それが直接の原因だと思います。（下記は一例）

HTML
1<div class="st-h-ad"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
2<!-- ためし -->
3<ins class="adsbygoogle"
4     style="display:block"</div><h2><span class="ez-toc-section" id="i-4">ヒルドイドと同じ薬は市販で売っている</span></h2>

投稿2019/11/24 08:36

kei344

総合スコア69596

marusankakun

2019/11/24 08:43

たしかに！その部分おかしかったですね。ありがとうございます。ただその部分を直してもアンダーラインは改善せず、「>一例」と仰っていることに鑑みてもおそらく他の部分も原因がありそうです。どこだ…(;^_^A なのでお聞きしたいのですが、「HTMLのコードのどこがおかしいか？」を探せるツールなどはございませんでしょうか？