How disable style in IE 7 but allow in others

Question

I have style

.sm:hover{border-bottom: 3px solid; 
border-color: #cc181e;
padding-bottom: 0;
display: inline-block;}

This looking good in modern browsers but not in ie 7 (Blinking)

I'm trying to override the style in IE7.

<!--[if lt IE 9]>
   <link rel="stylesheet" type="text/css" href="css/ie7Style.css" />
 <![endif]-->

Using this style

.sm:hover{border-bottom: 0px; padding-bottom: 0; display: inline-block;}

But it is still blinking. How to disable this blinking or how disable this style?

Please, don't offer me not use IE 7 because the site displayed in TWebbrowser component.

Answer 1

You are changing the display property on hover. Try applying display:inline-block to the .sm class and then add your hover styles.

.sm {
  display: inline-block;
  *display: inline; /* IE7 fix */
  zoom: 1; /* IE7 fix */
}

.sm:hover {
  border-bottom: 3px solid; 
  border-color: #cc181e;
  padding-bottom: 0;
}

You can also target IE7 and below using media queries hack:

@media screen\9 { /* styles for IE6 and IE7 only */ }