IE,Edgeで勝手にスクロールバーがついてしまった時の対処

現象

IE11、Edgeで意図しないところにスクロールバーがついてしまった

<li class="list">
  <a title="title" class="scroll" href="#introduction01">
    <div class="introduction_tab_content">
      <p class="introduction_title">hoge</p>
      <p class="introduction_name">fugafuga</p>
    </div>
  </a>
</li>

このHTMLを6つ作ってカード形式に並べていたのだが、テストをしている方から

「IE11とEdgeでスクロールバーが出てます」

とのこと。

要素にoverflow:scroll;がついているはずもなく（だとしたらChromeやFirefoxでも表示されるはず）なんだこれは。。。と思っていたところ

<a title="title" class="scroll" href="#introduction01">

この一行が原因でした。

どうやらIE11では

class="scroll"

を勝手にスクロールバーを出すと解釈するようです。

無駄な解釈をしないでください、、、笑

無事にクラス名を変更して、動作するようになりました。