开发者

How to fix CSS hover bug in IE7 and IE8?

I want to implement a hover effect with CSS for a html input button. (Changing border color on mouse over).

Actually technically no problem - and it is working - however I have issues with Internet Explorer 7 as well as IE8, because the effect is only working like 80% of the times there.

I also change the mousecursor on hover - which is working without problems - but changing the border (or the background-color) is working only most of the times. Sometimes I enter the button with the mouse and nothing happens.

Is thtere anyway to circumvent this behaviour - without using javascript or code-blowing wrapper elements?

See the following example code for details:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html id="document:html" lang="de">
<head><meta content="0" http-equiv="expires" /><meta content="text/html; charset=iso-8859-1" http-equiv="content-type" />
<style type="text/css">
input.linebutton {
  开发者_如何学运维  border: 1px solid #BBB;
    margin: 0 2px;
    background-color: #EEE; 
    text-align: left; 
    background-position: 2px 2px;
    background-repeat: no-repeat; 
    padding: 1px 3px 1px 23px;
    width: 0; /* for IE only */
    overflow: visible;
    cursor:pointer;
    height:22px;
}
input.linebutton:hover {
    border: 1px solid #FF8C00;  
    background-color: #EEE; 
    outline: none;
}
input.linebutton:active, .linebutton:focus {
    border: 1px solid #000000;  
    background-color: #EEE; 
    outline: none;
}
.linebutton[class] { /* IE ignores [class] */
    width: auto;
}
</style>
</head>
<body >
<input class="linebutton" id="test" name="test" style="background-image: url('image');" title="Test" type="submit" value="Test" />
</body>
</html>

Thanks in advance!


Digging graves up, but I had the same issue with IE7 and input:hover. When I changed the doctype to strict it was then support in IE7. No js needed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

IE7 support for hover


Not quite so elegant but maybe some jQuery?

jQuery("input.linebutton").hover(function() {
  jQuery(this).addClass("HoverClassName");
}, function() {
  jQuery(this).removeClass("HoverClassName");
});


Just replace your input[type=submit] by a button and you should be fine.
Your example modified would like like this:

<button class="linebutton" id="test" name="test" style="background-image: url('image');" title="Test" type="submit" value="Test">Submit</button>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜