Firefoxの相対配置されたdivによって残されたギャップを取り除くにはどうすればよいですか？

私の基本的な考え方は、行をハイライト表示するためのdivだけです。Firefoxの相対配置されたdivによって残されたギャップを取り除くにはどうすればよいですか？

IEの場合はうまくいきます。しかし、FFで私は問題を抱えています。人々が同じ機能を果たすために使用する標準的な方法はありますか？

ハイライトdivを相対に切り替えてFFでの位置付けを行う必要がありますが、行がハイライト表示されたときに最初の行の前に余分なギャップがあります。

私は一部のCSS/JavaScriptエキスパートが回避策を持っていることを期待しています。また、いくつかの標準的な方法がある場合は私に教えてください。私はそれを使用します。ここで

は、コードサンプルです：

<!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>

出典

2010-12-10 GC_

あなたはjQueryのようなframworkを使用することはありません何らかの理由はありますか？ –

私はJSFを使用しています。それらは互換性があると思いますか？ –

はい、jQueryは単なるJavaScriptです。まあ、それは、HibernateがちょうどJavaであると言っているようなものです;しかし、あなたはそのアイデアを得ます。 – Quaternion

ハイライトのdivの位置は絶対作り、その後、下記の溶液を見てください。

How to fix Absolute Positioning In FF?

出典

2010-12-17 14:19:30

あなたはIE6でその作業を行う必要がありますか？もしそうでなければ、:hover疑似クラスを使用して、すべてのスクリプトを取り除くことができます。

出典

2010-12-10 22:25:42 unclenorton

私はいくつかのhtml要素に各行を入れる必要があります。これにより、さらに多くのネットワークトラフィックが発生します。 –

あなたのdoctypeを同じものに置き換えて、1つの検証エラーから50になりました。それらのほとんどは「alt」エラーなどですが、何か不思議なことが起こりました。

EDIT：コピー/ペーストでdoctypeの問題が発生している可能性がありますが、まだ56のエラーが表示されます。そのうちの1つは、無効なPREタグのスタイル設定です。

出典

2010-12-10 23:16:24 Rob

私はそのpreタグを変更することがあります。私の解決策にはそんなものがあります。 –

ここで働くことを試みました：http://jsfiddle.net/bemace/Kg2Ag/4/しかし、それは混乱です。

これはかなり正気のアプローチのように思える：（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; 
}

出典

2010-12-10 23:49:49

このアプローチの問題は、より多くのネットワークトラフィックにあります。 –

@Grae - その他のネットワークトラフィック？これは元のサイズの4分の1です。外部スタイルシートを使用してページ間で共有すると、さらに優れています。 –

私は外部JavaScriptを使用します。さらに、ユーザーは通常、一度に複数のページを表示します。おそらく彼らは十数ページになるでしょう。しかし、JavaScriptは一度ダウンロードする必要があります。ユーザーが毎日このサイトを使用した場合、実際には追加される可能性があります。 –

Firefoxの相対配置されたdivによって残されたギャップを取り除くにはどうすればよいですか？

答えて

関連する問題