html - Internet Explorer 10 のメニュー項目にフォーカス アウトラインが予期せず表示される

Question

HTML メニューに CSS の問題があります。IE でのみ表示されます。IE10以降と互換性を持たせる必要があります。

私は次のHTMLを持っています:

<div class="categories-container">
    <ul class="categories">
        <li class="category item">
            <strong>
                <a class="text">Lorem ipsum 1</a>
            </strong>
        </li>
        <li class="category item">
            <strong>
                <a class="text">Lorem ipsum 2</a>
            </strong>
        </li>
        <li class="category item active">
            <strong>
                <a class="text">Lorem ipsum 3</a>
            </strong>
        </li>
        <li class="category item">
            <strong>
                <a class="text">Lorem ipsum 4</a>
            </strong>
        </li>
    </ul>
</div>

...そしてCSS:

.categories-container { width: 200px; margin: 30px; }
.categories {
    border-top: 1px dotted rgba(111, 111, 111, 1);
    list-style: none;
    margin: 37px 0 0 0;
}
.categories .category {
    border-bottom: 1px dotted rgba(111, 111, 111, 1);
}

.categories a {
    display: block;
    padding: 3px 10px;
    color: #444;
}

.categories a:hover {
    text-decoration: none;
    color: #444;
    background: rgba(220, 231, 235, 0.470588);
}

.categories .active a {
    color: #444;
    background: rgba(220, 231, 235, 1);;
    cursor: default;
    text-decoration: none;
}

この問題を示すJSFIDDLEを作成しました。

再現する手順：

• デモを開く

• メニューから任意の項目をクリックします

• IE を使用していない場合は、次のように表示されます。

  

• IE を使用している場合は、境界線と下線付きのテキストが表示されます。

  

境界線と下線付きのテキストを修正するにはどうすればよいですか?