Posted at

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"

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

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

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