html - IE8/9鼠标悬停时如何避免渐变背景闪烁

Question

当我将以下 CSS 应用于 IE8/9 并将鼠标悬停在空白区域时，背景会闪烁。

这是HTML

<div style="width: 100%;">
    <ul>
        <li>
            <a class="content" href="javascript:;">
                Please mouse over after the words
            </a>
        </li>
        <li>
            <a class="content" href="javascript:;">
                Please mouse over after the words
            </a>
        </li>
    </ul>
</div>

这是CSS设置

ul {
    list-style: none; margin: 0px; padding: 0px; border: 0px; position: relative;
}
li {
    padding: 0px; position: relative;
    cursor: pointer;
}
.content {
    padding: 3px 6px;
    border-radius: 4px;
    text-decoration: none;
    display: block;
}
.content:hover {
    margin: 0;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3f4fd', endColorstr='#c7e9f9',GradientType=0 );
}

您可以在jsfiddle中运行示例

Answer 1

尝试默认给它一个纯色的背景色

http://jsfiddle.net/9yy3y/7/

.content {
    padding: 3px 6px;
    border-radius: 4px;
    text-decoration: none;
    display: block;

    background:#fff;
}

Answer 2

您可以通过将 .content 类添加到列表项并a在 CSS 中定位列表中的标签来解决此问题。

html:

<div style="width: 100%;">
<ul>
    <li class="content">
        <a href="#">
            Please mouse over after the words
        </a>
    </li>
    <li class="content">
        <a href="#">
            Please mouse over after the words
        </a>
    </li>
</ul>
</div>

CSS：

ul {
    list-style: none; margin: 0px; padding: 0px; border: 0px; position: relative;
}
li {
    padding: 0px; position: relative;
    cursor: pointer;
}
.content a {
    padding: 3px 6px;
    border-radius: 4px;
    text-decoration: none;
    display: block;
}
.content:hover a {
    margin: 0;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3f4fd',     endColorstr='#c7e9f9',GradientType=0 );
}

工作示例：

http://jsfiddle.net/9yy3y/8/

这消除了 IE9 中的闪烁 - 我无法测试任何更低的值，因为 JSFiddle 不喜欢 IE9 对 8 或 7 的仿真。（或者根本不支持它们......）