html - How to avoid the blinking of gradient background in IE8/9 when mouse hover -

when apply following css ie8/9, , mouse on empty area, background blinking.

here html

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

here css setting

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 ); } 

you can run example in jsfiddle

try , give solid background colour default

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

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