Comment puis-je me débarrasser de l'espace laissé par un div positionné relatif dans Firefox?

Mon idée de base est juste une div pour mettre en évidence les lignes.Comment puis-je me débarrasser de l'espace laissé par un div positionné relatif dans Firefox?

Pour IE cela fonctionne très bien. Cependant, dans FF j'ai un problème. Existe-t-il une norme selon laquelle les gens utilisent cette même fonction?

Je dois commuter le div de surbrillance sur pour que le positionnement fonctionne dans FF, mais il y a un écart supplémentaire avant la première ligne lorsqu'une ligne est mise en surbrillance. J'espère qu'un expert CSS/JavaScript a une solution de contournement. Aussi, s'il y a des façons normales de faire, faites le moi savoir. Je vais l'utiliser.

Voici un exemple de code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
<head> 
    <script type="text/javascript" language="JavaScript"> 
     function firstChildC(startNode) 
     { 
      var nextNode = startNode.firstChild; 

      while(nextNode.nodeType != 1) //loop until it is an actual tag, not white space 
       nextNode = nextNode.nextSibling; 

      return nextNode; 
     } 

     var bFirefox = false; 

     if (navigator.userAgent.indexOf("Firefox") != -1) 
      bFirefox = true; 

     function highlightPosition(event) 
     { 
      //gets the td that holds the pre tag, which holds the data 
      var preTag; 
      if(bFirefox) 
       preTag = event.target; 
      else 
       preTag = event.srcElement; 

      var containerOfPreTag = preTag.parentNode; 
      var lineCountTD = firstChildC(containerOfPreTag.parentNode); 
      var numLines = parseInt(lineCountTD.innerHTML); 
      var lineHeight = preTag.offsetHeight/numLines; 

      //find line to highlight 
      var currentLine; 
      if(bFirefox) 
       currentLine = parseInt(event.layerY/lineHeight); 
      else 
       currentLine = parseInt(event.offsetY/lineHeight); 

      //highlight line 
      var highlighterDiv = firstChildC(containerOfPreTag); 
      highlightLine(highlighterDiv,0,containerOfPreTag.offsetWidth, (lineHeight*currentLine), lineHeight); 

      return 0; 
     } 

     function highlightLine(highlighterDiv, left, width, top, height) 
     { 
      highlighterDiv.style.display = "block"; 
      if(bFirefox) 
       highlighterDiv.style.position = "relative"; 

      highlighterDiv.style.left = left+"px"; 
      highlighterDiv.style.width = width+"px"; 
      highlighterDiv.style.top = top+"px"; 
      highlighterDiv.style.height = height+"px"; 
     } 
    </script> 
</head> 

<body id="page_body"> 
    <div id="section_content" style="overflow:auto; width:100%;"> 
     <table border="0" cellpadding="0" cellspacing="0" width="100%" style="line-height:1.1em"> 
      <tr> 
       <td style="display:none;"> 
        22 
       </td> 
       <td style="width: 0px; vertical-align: top;"> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
        <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> 
         <img style='height: 0.8em; width: 0.8em'/> 
        </div> 
       </td> 

       <td style="font-size:100%;position:relative;"> 

        <div style="height: 1.1em; background-color: #f7fa81; position: absolute; z-index:-1"> 
        </div> 

        <PRE style="margin: 0px; border: 1px solid #ff0000" onmousemove="highlightPosition(event);">THIS IS PAGE 01. LINE 01. 
THIS IS PAGE 01. LINE 02. 
THIS IS PAGE 01. LINE 03. 
THIS IS PAGE 01. LINE 04. 
THIS IS PAGE 01. LINE 05. 
THIS IS PAGE 01. LINE 06. 
THIS IS PAGE 01. LINE 07. 
THIS IS PAGE 01. LINE 08. 
THIS IS PAGE 01. LINE 09. 
THIS IS PAGE 01. LINE 10. 
THIS IS PAGE 01. LINE 11. 
THIS IS PAGE 01. LINE 12. 
THIS IS PAGE 01. LINE 13. 
THIS IS PAGE 01. LINE 14. 
THIS IS PAGE 01. LINE 15. 
THIS IS PAGE 01. LINE 16. 
THIS IS PAGE 01. LINE 17. 
THIS IS PAGE 01. LINE 18. 
THIS IS PAGE 01. LINE 19. 
THIS IS PAGE 01. LINE 20. 
THIS IS PAGE 01. LINE 21. 
THIS IS PAGE 01. LINE 22.</PRE> 
       </td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

Source

2010-12-10 GC_

Y at-il une raison quelconque vous ne seriez pas utiliser un framwork comme jQuery? –

J'utilise JSF. Pensez-vous qu'ils sont compatibles. –

Oui, jQuery est juste JavaScript. Eh bien ... dire que c'est comme dire Hibernate est juste Java;) mais vous avez l'idée. – Quaternion

Faire la position absolue du point culminant div puis regarder la solution suivante.

How to fix Absolute Positioning In FF?

Source

2010-12-17 14:19:30

Avez-vous de faire ce travail dans IE6? Parce que sinon, vous pouvez simplement utiliser :hover pseudo-classe et se débarrasser de tout le script.

Source

2010-12-10 22:25:42 unclenorton

Je devrais mettre chaque ligne dans un élément html. Cela ajouterait à beaucoup plus de trafic réseau. –

J'ai supprimé et remplacé votre doctype par la même chose et est passé de 1 erreur de validation à 50. La plupart d'entre eux sont des erreurs «alt» et autres, mais quelque chose d'idiot est arrivé là.

EDIT: Le problème de doctype peut avoir eu lieu dans copier/coller, mais je montre toujours 56 erreurs. L'un d'eux est votre tentative de style de la balise PRE, qui est invalide.

Source

2010-12-10 23:16:24 Rob

Je peux changer ce pré-tag. Ce genre de correspond à ma solution. –

J'ai essayé de faire fonctionner cela ici: http://jsfiddle.net/bemace/Kg2Ag/4/ mais c'est un gâchis.

Cela semble être une approche beaucoup plus raisonnable: (demo'd à http://jsfiddle.net/bemace/DBQFW/)

<ul class="code"> 
<li>THIS IS PAGE 01. LINE 01.</li> 
<li>THIS IS PAGE 01. LINE 02.</li> 
<li>THIS IS PAGE 01. LINE 03.</li> 
<li>THIS IS PAGE 01. LINE 04.</li> 
<li>THIS IS PAGE 01. LINE 05.</li> 
<li>THIS IS PAGE 01. LINE 06.</li> 
<li>THIS IS PAGE 01. LINE 07.</li> 
<li>THIS IS PAGE 01. LINE 08.</li> 
<li>THIS IS PAGE 01. LINE 09.</li> 
<li>THIS IS PAGE 01. LINE 10.</li> 
<li>THIS IS PAGE 01. LINE 11.</li> 
<li>THIS IS PAGE 01. LINE 12.</li> 
<li>THIS IS PAGE 01. LINE 13.</li> 
<li>THIS IS PAGE 01. LINE 14.</li> 
<li>THIS IS PAGE 01. LINE 15.</li> 
<li>THIS IS PAGE 01. LINE 16.</li> 
<li>THIS IS PAGE 01. LINE 17.</li> 
<li>THIS IS PAGE 01. LINE 18.</li> 
<li>THIS IS PAGE 01. LINE 19.</li> 
<li>THIS IS PAGE 01. LINE 20.</li> 
<li>THIS IS PAGE 01. LINE 21.</li> 
<li>THIS IS PAGE 01. LINE 22.</li> 
</ul>

CSS:

ul.code { 
    border: solid red 1px; 
    padding: 0px; 
    margin: 0px; 
} 
.code li { 
    font-size: 8pt; 
    font-family: "courier"; 
    padding-left: 1px; 
} 
.code li:hover { 
    background-color: #F7FA81; 
}

Source

2010-12-10 23:49:49

Le problème avec cette approche, c'est dans beaucoup plus de trafic réseau. –

@Grae - Plus de trafic réseau?C'est un quart de la taille de l'original, et si vous utilisez une feuille de style externe pour la partager entre les pages c'est encore mieux. –

J'utiliserais du JavaScript externe. De plus, l'utilisateur devrait normalement voir plus d'une page à la fois. Peut-être qu'ils iraient à une douzaine de pages. Cependant, le JavaScript aurait besoin d'être téléchargé une fois. Si l'utilisateur utilisait ce site chaque jour, il pourrait vraiment ajouter. –

Comment puis-je me débarrasser de l'espace laissé par un div positionné relatif dans Firefox?

Répondre

Questions connexes