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来证明这个问题。

重现的步骤：

打开DEMO
点击菜单
如果您在IE上不，您会看到：
如果您在IE上，您会看到边框和带下划线的文字：

如何修复边框和带下划线的文字？

Answer 1

.categories a {
    display: block;
    padding: 3px 10px;
    color: #444;
    text-decoration: none; /*removes text underline*/
    outline: none; /*removes dotted outline causing solid border*/
}

http://jsfiddle.net/9xTLb/1/

当您单击它们时，Internet Explorer会为链接添加一个虚线outline和一个下划线，以便代码可以解决问题：）

Internet Explorer 10菜单项意外显示焦点轮廓

1 个答案: