Problème CSS: a: le survol ne fonctionne pas avec IE (css Ninja nécessaire)

Pourquoi c'est à dire pas de changement de la couleur d'arrière-plan sur mon site pour les onglets a:hover mais le fait dans Firefox/Chrome/Safari correctement?

Que puis-je faire pour le faire fonctionner sous IE 6+?

HTML

<ul class="tabbernav">
<li class="tabberactive"><a title="All" href="javascript:void(null);">All</a></li>
<li class=""><a>Tab1<span class="tabTotal"> (0)</span></a></li>
<li class=""><a>Tab2<span class="tabTotal"> (2)</span></a></li>
<li class=""><a>Tab3<span class="tabTotal"> (1)</span></a></li>
</ul>

CSS

ul.tabbernav li a:hover {background:#fdfdfd; border: 1px solid #555; border-bottom: none; color:#3366a9; cursor: pointer}

source d'informationauteur TimJK

7

Première chose que je voudrais faire est de vérifier que l'ordre des sélecteurs de pseudo est correct.

Il devrait être-
```
a:link {color:#FF0000} /* unvisited link */  
a:visited {color:#00FF00} /* visited link */  
a:hover {color:#FF00FF} /* mouse over link */  
a:active {color:#0000FF} /* selected link */  
```
La seule spécifiques IE passez question je me souviens de se rattache à des éléments link, donc je ne pense pas que c'est votre problème. http://www.bernzilla.com/item.php?id=762 - Juste au cas où.

Si ce n'est pas la réponse à votre question ne vous l'esprit annonce de la liés bloc de css?

GAH - C'en était un dur!

Il ressemble IE est la rupture, car les liens n'ont pas associé à un élément Href. Corriger cela et vous devriez être bien.

--Breaking News - j'ai peut-être un idiot - C'était la dernière chose que j'ai changé sur ma page de test et qu'il fixe, mais quand j'ai mis tous ensemble, il s'est cassé de partout... alors, prenez ce que je viens de poster avec un grain de sel. Je suis à la sauvegarde de voir ce qui s'est passé.
7

Vous devez placer href="" attribut dans <a> tag.

Cela fonctionne très bien.

Également utiliser le <!doctype html> balise en haut de la page. Maintenant tout va bien.
1

C'est une solution simple! Utiliser background-color:#fffffe cas de changement de background-color:#fff à fond:#fff ne fonctionne pas.

http://haslayout.net/css/Hover-White-Background-Ignore-Bug

Ajouter coup balise <head> pour le fixer.

pour IE9

<meta http-equiv="X-UA-Compatible" content="IE=9">

pour IE10

<meta http-equiv="X-UA-Compatible" content="IE=10">

0

Votre CSS semble être valide.

Essayez d'ajouter un"!important " a:hover, et aussi essayer de modifier d'autres styles dans la définition. Vous avez peut-être d'autres style primordial que le particulier a:hover style via la cascade.

Firebug dans FF peuvent vous montrer quelques contradictoires styles hérités (bien que dans IE6, vous êtes sur votre propre bien sûr), mais vous devez vous assurer que vous ne sont pas contradictoires. a:hover fonctionne très bien dans IE6, comme vous et d'autres dans la question aweare de

Aussi, mettre des points-virgules et les retours à la ligne après vos déclarations, vous sale païen!
0

J'obtiens une erreur javascript (Valeur de propriété non Valide) dans IE à la ligne ~852:
```
document.getElementById('panel-hlisting-all').style.backgroundColor = color;
```
où la couleur a la valeur "#ffff100".

Cela pourrait-il être la cause de votre problème?

Viens de penser à ça maintenant, pourquoi ne pas utiliser Jquery pour faire ça? avec seulement QUELQUES lignes de code que vous l'aurez fait.

Tout d'abord, télécharger Jquery de http://www.jquery.com. Ensuite, vous devrez le relier à votre fichier, sur la tête de votre code HTML:

<script src="url_to_your_jquery_file_here"></script>

Ensuite, ajoutez une autre partie de Javascript dessous de celui-ci:

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("li a").hover(
          function () {
            $(this).css("color", "#3366a9");
          }, 
          function () {
            $(this).css("color","#838383");
          }
        );
    });
</script>

0

Je pense que IE 7 fixe hover problème sur d'autres éléments que des <a>mais je n'ai pas testé.

À faire pour IE 6 manque de soutien de l' :placez le sélecteur, vous avez juste besoin d'utiliser le javascript pour obtenir le même effet. Définir un événement onMouseOver que s'applique la classe que vous souhaitez. 😀
0

J'ai essayé toutes les solutions que j'ai trouvé. Dans mon cas, le bug a été déterminée par la le Traducteur de Google. Je l'ai enlevé dans IE et Opéra (où elle provoque des erreurs d'autres) et tout fonctionne bien.
0

Essayez d'ajouter:
```
display: block;
position: relative;
```
à votre css a.
0

Utilisation <!DOCTYPE html> en haut de la page. Il permettra de résoudre le problème et d'autres problèmes qui peuvent survenir.
0

Passez élément caprice de mode dans IE ne fonctionne pas. Alternative est définie via le script-événement (sans jquery) de l'élément html:
```
<a onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" >  My link</a>
```
0

vous pouvez ajouter la ligne suivante au début de votre fichier html, il travaille pour moi dans le est 9:
```
       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
0

vous pouvez ajouter la ligne suivante au début de votre fichier html, cela fonctionne pour moi sous ie 9:
```
       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```

-1

Vous pouvez utiliser une expression dans votre CSS. J'utilise cette technique, j'ai développé un site client.

Viens de le mettre sur la FIN de votre CSS, depuis les navigateurs Webkit ne rien lu de ci-dessous.

* html * { color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

Vous devez vous connecter pour publier un commentaire.