javascript et css travaillant sur Firefox, mais ne fonctionne pas sur IE

Salut J'ai ce code qui travaille sur fitrefox mais ne fonctionne pas sur IE manque dernier charector sur IEjavascript et css travaillant sur Firefox, mais ne fonctionne pas sur IE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>wrapped</title> 
     <script type="text/javascript" language="javascript"> 
     function set_padd(){ 
     var tt = document.getElementById("span_padding").innerHTML;  
     var txt = new Array();  
    txt = tt.split(" ");     
     var atxt = ''; 
     var f_txt = ''; 
     var wrd_pr_linr = 4;  
     var cnt = 1;  
     for(var i = 0; i < txt.length; i++){ 
      if(txt[i].length > 0){   
      txt[i] = txt[i].replace(' ',''); 
      if(cnt < wrd_pr_linr){ 
      if(txt[i].length > 0){ 
      atxt += ' '+txt[i].replace(' ',''); 
      cnt++;   
      } 
      }else{ 
      f_txt += '<a class="padd_txt" >'+atxt+'</a><br />'; 
      atxt = ''; 
      cnt = 1; 
      } 
      } 
     } 
     document.getElementById("span_padding").innerHTML = f_txt; 
     } 
     </script> 
     <style type="text/css"> 
     .padd_txt{padding:7px;background:#009;color:#FFF;line-height:26px;font-size:14px;} 

    body{font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:24px; line-height:1.2em;} 
    span{background-color: #009; width:200px; color: #FFF;" class="blocktext;} 



     </style> 
</head> 
<body onload="set_padd();"> 
    <div style="width: 350px;"> 
     <p> 
     <span id="span_padding"> 
      This is what I want to 
     happen where one 
     long string is wrapped 
     and the text has this 
     highlight color behind 
     it. 
     </span> 
    </div> 
</body> 
</html>

à mettre sur Firefox est

Ce
est
Je veux
se produire où une chaîne
est enveloppé
et le texte
ce point culminant
derrière elle.

et sortie sur IE

C'est ce que
veulent se passer
une longue chaîne
enveloppé et la
a ce point fort

manquant deux derniers mots

Source

2010-04-21 Nirbhay saini

Il semble que cela ne fonctionne pas correctement sur les deux navigateurs, il manque des mots sur les deux sorties. –

vous devriez essayer de votre code un peu plus lisible, donc ppl ne pas avoir à deviner ce que vous voulez stocker dans chaque var – fmsf

Quelle version de IE utilisez-vous? –

Les résultats sont différents sur IE et Firefox en raison de l'habitude d'IE de jeter des espaces autour des balises. Mais votre fonction est cassée sur les deux navigateurs, car elle jette le dernier mot de chaque ligne et potentiellement toute la dernière ligne sans jamais la sortir.

Cela semble un peu laborieux aussi. Que diriez-vous en utilisant une expression régulière pour correspondre à chaque groupe de jusqu'à quatre mots:

function set_padd() { 
    var span= document.getElementById('span_padding'); 
    var text= span.firstChild.data; 
    span.innerHTML= ''; 
    var lines= text.match(/\S+(\s+\S+){0,3}/g); 

    for (var i= 0; i<lines.length; i++) { 
     var el= document.createElement('a'); 
     el.className= 'padd_txt'; 
     el.appendChild(document.createTextNode(lines[i])); 
     span.appendChild(el); 
     span.appendChild(document.createElement('br')); 
    } 
}

Source

2010-04-21 11:24:40 bobince

+1, J'espère que cela ne vous dérange pas J'ai emprunté la plupart de votre regex pour améliorer la dernière partie de ma réponse :-) –

Il y a plusieurs problèmes évidents avec votre code:

Dans votre i, où cnt < wrd_pr_linr est faux, vous réinitialisant le compte et envelopper une portée autour du courant atxt, mais vous ne faites rien avec txt[i], donc il est manqué que l'incrément augmente au prochain tour. Vous pouvez résoudre ce problème en ajoutant i--; après cnt++;.
Si votre boucle se termine alors que cnt < wrd_pr_linr est vrai, l'instruction else qui crée la chaîne DOM ne sera pas exécutée et la valeur de atxt est simplement ignorée. Vous devez exécuter le même bloc de code lorsque votre instruction if est sur le point de se terminer.

Si elle était moi, je regarde dans beaucoup plus propre, plus simple, solution regex:

function set_padd(){ 
    var f_txt; 
    var tt = document.getElementById("span_padding").innerHTML; 

    // replace every third space with "{!BREAK!}"  
    tt = tt.replace(/(.*?\s+.*?\s+.*?)\s+/g, "$1{!BREAK!}"); 

    // Splitting on that string creates an array with 3 words in each index 
    tArr = tt.split("{!BREAK!}"); 

    // Join the array again with the HTML you need between each index 
    f_txt = tArr.join('</a><br/><a class="padd_txt">'); 

    // Wrap the text with the start tag and the end tag 
    f_txt = '<a class="padd_txt">' + f_txt + '</a>'; 

    // Viola! 
    document.getElementById("span_padding").innerHTML = f_txt; 
}

Retirez les commentaires, échanger la regex pour quelque chose de similaire à bobince's et vous pouvez obtenir il a l'air vraiment petit:

function set_padd(){ 
    var tt = document.getElementById("span_padding").innerHTML; 
    var f_txt = '<a class="padd_txt">' 
       + tt.match(/\S+(\s+\S+){0,2}/g) 
        .join('</a><br/><a class="padd_txt">') 
       + '</a>'; 

    document.getElementById("span_padding").innerHTML = f_txt; 
}

Source

2010-04-21 11:26:43

javascript et css travaillant sur Firefox, mais ne fonctionne pas sur IE

Répondre

Questions connexes