2010-11-26 61 views
1

Internet Explorer se comporte différemment de Firefox, Chrome, Opera, Safari. Voir ma question: HTML link with padding and CSS style active does not workOù dois-je signaler un bug - Firefox ou Internet Explorer?

Est-ce un comportement indéfini? Ou je dois signaler un bug. Si plus tard, alors quels navigateurs vont bien?

Voici un code de test:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>css active padding href problem</title> 
     <style type="text/css"> 
      a{ 
       background:#CCC; 
       border:1px solid #666; 
       padding:0 35px 0 0; 
      } 
      a:active{ 
       padding:0 0 0 35px; 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
      <p>Click on <i>Stack</i> - href does not work. 
       Click on <i>Overflow</i> - href works. 
       All browsers are affected. 
       Except IE.</p> 
      <a href="https://stackoverflow.com/">StackOverflow</a> 
     </div> 
    </body> 
</html> 

Répondre

3

Je pense que IE fait mal. a: active fonctionne quand le bouton de la souris est enfoncé, mais le href ne s'éteint pas avant que le bouton de la souris soit de nouveau en place.

Pseudo-code:

onmousedown(e) { 
    setCssAsActive(); 
} 
onmouseup(e) { 
    activateHref(); 
} 

Si la souris monte en dehors de l'élément, rien happends. Essayez de cliquer sur un lien, puis faites glisser votre souris loin du lien, puis relâchez le bouton. Rien ne devrait arriver.

C'est ce qui se passe dans votre code. Lorsque vous cliquez sur Stack-text, le lien s'éloigne de votre pointeur et lorsque vous relâchez le bouton, le lien n'est plus sous le pointeur. Il revient au moment de la libération, mais il est trop tard.

Par conséquent, je pense que IE se trompe.

0

Le principal problème que je pense est dans le modèle de boîte IE, comme indiqué ici http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Comme le lien dire IE comprend le rembourrage dans la boîte, ce qui est la raison pour laquelle le lien fonctionne avec IE, mais pas un autre navigateur, ceci est prouvé en changeant le rembourrage de marge dans l'exemple ci-dessus, ou ici http://jsfiddle.net/S5dGw/

Bien que la plupart (y compris moi-même) dirais que c'est un bug IE, certains disent que le c'est une question W3C avec les spécifications. http://www.crossbrowser.net/82/internet-explorer-box-model-is-not-a-bug/scoff.

Ne vous inquiétez pas quand CSS3 est entièrement pris en charge (il l'avenir lointain :)), il aura l'attribut box-sizing, qui résoudra ce problème, voir ci-dessous:

http://www.w3.org/TR/css3-ui/#box-sizing