0

我的 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 上，您将看到边框和带下划线的文本：

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

4

1 回答 1

2 
.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在链接中添加一个虚线和下划线，这样代码就可以了 :)

于 2013-09-04T07:34:04.600 回答