我的基本想法是只用一个 div 来突出显示行。
对于 IE，它工作得很好。但是，在 FF 中我遇到了问题。是否有人们用来执行相同功能的标准方法？
我必须将突出显示的 div 切换为 relative 以使定位在 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>
最佳答案
试图让它在这里工作: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;
}
关于javascript - 如何摆脱 Firefox 中相对定位的 div 留下的空白？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4413382/