JQuery Texte Resizing ne fonctionne pas avec IE

Question

J'utilise le script suivant (qui nécessite le plugin cookies pour jquery) pour permettre javascript permis aux utilisateurs de modifier la taille de la police sur un site Web de charité médicale:

var sitefunctions = { 
    textresize: function() {   
     var $cookie_name = "TextSize"; 
     var originalFontSize = $("html").css("font-size"); 
     // if exists load saved value, otherwise store it 
     if ($.cookie($cookie_name)) { 
      var $getSize = $.cookie($cookie_name); 
      $("html").css({ fontSize: $getSize + ($getSize.indexOf("px") != -1 ? "" : "px") }); // IE fix for double "pxpx" error 
     } else { 
      $.cookie($cookie_name, originalFontSize); 
     } 
     // reset link 
     $(".reset").bind("click", function() { 
      $("html").css({ "font-size": originalFontSize }); 
      $.cookie($cookie_name, originalFontSize); 
     }); 
     // text "+" link 
     $(".increase").bind("click", function() { 
      var currentFontSize = $("html").css("font-size"); 
      var currentFontSizeNum = parseFloat(currentFontSize, 10); 
      var newFontSize = currentFontSizeNum * 1.2; 
      if (newFontSize, 11) { 
       $("html").css({ "font-size": newFontSize }); 
       $.cookie($cookie_name, newFontSize); 
      } 
      return false; 
     }); 
     $(".decrease").bind("click", function() { 
      var currentFontSize = $("html").css("font-size"); 
      var currentFontSizeNum = parseFloat(currentFontSize, 10); 
      var newFontSize = currentFontSizeNum/1.2; 
      if (newFontSize, 11) { 
       $("html").css({ "font-size": newFontSize }); 
       $.cookie($cookie_name, newFontSize); 
      } 
      return false; 
     }); 
    } 
} 

Vous pouvez puis l'appeler depuis votre page comme ceci:

 $(document).ready(function() { 
      // show text resizing links 
      $(".AccessibilityControls").show(); 
      sitefunctions.textresize(); 
     }) 

Vous pouvez ensuite mettre des liens dans la page comme ceci:

<div class="AccessibilityControls" style="display:none;">    
     Text Size:<br /> 
     <a class="increaseFont" style="font-size: 14pt;" title="Increase Text Size" href="#" rel="nofollow">A+</a> | 
     <a class="decreaseFont" style="font-size: 11pt;" title="Decrease Text Size" href="#" rel="nofollow">A-</a> | 
     <a class="resetFont" href="#" rel="nofollow">Reset </a> 
    </div> 

Jusqu'ici, tout va bien. Ce qui précède suppose que vous avez défini une taille de police dans une feuille de style pour la balise html comme suit:

html { police-size: x-small; }

PROBLÈME 1:

Il fonctionne très bien tous les navigateurs sauf IE.

POURQUOI ?!

PROBLÈME 2:

Je suis bien le débogage dans Firefox, mais cela est un problème IE! J'ai essayé d'attacher le processus au débogueur VS, mais cela semble fonctionner de manière intermittente ...

Answer 1

OK, c'était rapide et instructif.

1. Poser la question est la moitié de la réponse ...

2. IE n'est pas en mesure d'interpréter x-petite en taille numérique, qui est ce que les navigateurs Mozilla font.

3. Comme le script que je me sers essaie de joindre un px à la propriété taille de la police, vous vous retrouvez avec:

x-smallpx

Là-dessus jQuery vous dit de Näff off.

Changer à:

html { -size: 65%; }

a résolu le problème. Cela est évalué à un nombre par IE et donc jQuery est heureux.

Je suis toujours confus par Visual Studio et le débogage js. Il semble y avoir plusieurs façons de peler le chat et aucun ne travaille tout le temps.

Ayant d'abord rencontré ce problème hier, je suis soulagé de l'avoir résolu et d'avoir trouvé comment déboguer dans IE. Double whammy. Le problème qui me reste est que j'ai lu quelque part qu'il est souhaitable d'utiliser x-small pour définir la taille de la police et ensuite faire toutes les autres tailles relatives à cela.Alors je me sens un peu nue avec cette police-taille: 65% malarkey ...

Encore, devra contourner cela comme les problèmes d'Accessiblity sont un problème.