Comment fixer le CSS hover bug dans IE7 et IE8?

Je veux mettre en œuvre un effet hover en CSS pour html touche d'entrée. (Changement de couleur au survol de la souris).

En fait, techniquement, pas de problème - et il est de travail - toutefois, j'ai des problèmes avec Internet Explorer 7 et IE8, parce que l'effet n'est que de travailler comme 80% des fois là-bas.

J'ai aussi changer le mousecursor sur sensitif qui fonctionne sans problèmes, mais en changeant la frontière (ou de la couleur d'arrière-plan) est la plupart du temps. Parfois, je rentre le bouton avec la souris et rien ne se passe.

Est thtere de toute façon de contourner ce comportement, sans l'aide de javascript ou de code de la dénonciation wrapper éléments?

Voir l'exemple de code suivant pour plus de détails:

<!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>

Merci d'avance!

  • Ce qui se passe sans la onblur et onfocus attributs? Ce n' setFocus() faire?
  • le javascript attributs ont été insérées par un cadre, ils n'ont pas d'influence sur le problème - je les retirer de l'exemple!
InformationsquelleAutor räph | 2011-01-10
  1. 4

    Creuser des tombes, mais j'ai eu le même problème avec IE7 et d'entrée:hover. Quand j'ai changé le doctype strict, il a été ensuite appuyer dans IE7. Pas de js nécessaires. 

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

    IE7 soutien pour planer

    • Ajouter ce DOCTYPE fait toutes les polices dans ma page de devenir plus grand, ce qui se passe ?
    InformationsquelleAutor whitespy9
  2. 0

    Pas très élégant, mais peut-être que certains jQuery? 

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

    Il suffit de remplacer votre input[type=submit] par un bouton et vous devriez être bien.

    Votre exemple modifié comme comme ceci:

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