在Firefox HTML定位问题（在IE和Chrome的工作） [英] HTML Position Issue in Firefox (Works in IE and Chrome)
问题描述
我有以下的code。当我将鼠标放在code它应该显示的位置100 X100股利。这是工作在IE和Chrome罚款;然而，在div不会移动到在Firefox中所需的位置。有什么必要为了改变使它工作？
请注意：我使用以下code用于定位的div
$（'＃提示），CSS（{左：100 +像素，顶：100 +像素的位置：绝对}）
- 完成code -
＆LT;！DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0 Strict标准// ENhttp://www.w3.org/TR/xhtml1/DTD/ XHTML1-strict.dtd＆GT;＆LT; HTML的xmlns =http://www.w3.org/1999/xhtmlXML：LANG =ENGT＆;＆LT; HEAD＆GT;＆LT;标题＆GT;测试与LT; /标题＆GT;＆LT;风格类型=文/ CSS＆GT; .tooltip { 背景色：橙色; 位置：绝对的; 边框样式：固体; 边框宽度：2px的; 边框底部：固体2px的黑色; }＆LT; /风格＆GT;＆LT;脚本SRC =脚本/ jQuery的-1.4.1.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ JavaScript的＆GT; 功能showDiv（batchId，VENDORID）{ tooltip.style.display =块; batch.innerHTML = batchId; vendor.innerHTML = VENDORID; $（'＃提示），CSS（{左：100 +像素，顶：100 +像素的位置：绝对}） }＆LT; / SCRIPT＆GT;＆LT; /头＆GT;＆LT;身体GT;＆LT; DIV＆GT; ＆LT; DIV＆GT; ＆LT;表CELLSPACING =0规则=所有边界=1ID =MainContent_grdTooltip的风格=边界崩溃：崩溃;＆GT; ＆所述; TR＆GT; 百分位范围=山口＆GT; MainID＆LT; /第i 百分位范围=山口＆GT; SecondID＆LT; /第i 百分位范围=山口＆GT; code＆LT; /第i ＆LT; / TR＆GT; ＆所述; TR＆GT; ＆所述; TD＆GT 101下; / TD＆GT; ＆LT; TD＆GT; 999999991＆LT; / TD＆GT; ＆LT; TD的onmouseover =showDiv（101,999999991）＆GT; 55789＆LT; / TD＆GT; ＆LT; / TR＆GT; ＆LT; /表＆gt; ＆LT; / DIV＆GT; ＆LT; DIV ID =提示级=工具提示＆GT; ＆LT;表＆gt; ＆所述; TR＆GT; ＆LT; TD＆GT;主营编号：LT; / TD＆GT; ＆LT; TD ID =批量＆GT;＆LT; / TD＆GT; ＆LT; / TR＆GT; ＆所述; TR＆GT; ＆LT; TD＆gt;第二个编号：LT; / TD＆GT; ＆LT; TD ID =供应商＆GT;＆LT; / TD＆GT; ＆LT; / TR＆GT; ＆LT; /表＆gt; ＆LT; / DIV＆GT;＆LT; / DIV＆GT;＆LT; /身体GT;＆LT; / HTML＆GT;
下面是一个说明你的code进行的jsfiddle。
（根据萤火虫）问题就出在你的脚本。您引用不是定义的变量提示。 Chrome和IE似乎吞下此错误并继续，而Firefox扼流圈和死亡。
更改此：
函数showDiv（batchId，VENDORID）{ tooltip.style.display =块; batch.innerHTML = batchId; vendor.innerHTML = VENDORID; $（'＃提示），CSS（{左：100 +像素，顶：100 +像素的位置：绝对}）}
这样：
函数showDiv（batchId，VENDORID）{ $（'＃提示），CSS（'显示器'，块）。 $（'＃一批'）HTML（batchId）; $（'＃供应商）HTML（VENDORID）; $（'＃提示），CSS（{左：100 +像素，顶：100 +像素的位置：绝对}）}
编辑：据我所知，jQuery的CSS函数被调用于$（＃提示）的两倍。我试图保持code相同流量尽可能：）
I have the following code. When I mouse over the "CODE" it should show the div on position 100 X100. It is working fine in IE and Chrome; however the div does not move to the required position in Firefox. What need to be changed in order to make it working?
Note: I am using the following code for positioning the div
$('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })
--Complete Code --
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
.tooltip
{
background-color: Orange;
position: absolute;
border-style: solid;
border-width: 2px;
border-bottom: solid 2px black;
}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function showDiv(batchId, vendorId) {
tooltip.style.display = "block";
batch.innerHTML = batchId;
vendor.innerHTML = vendorId;
$('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })
}
</script>
</head>
<body>
<div>
<div>
<table cellspacing="0" rules="all" border="1" id="MainContent_grdTooltip" style="border-collapse: collapse;">
<tr>
<th scope="col">MainID</th>
<th scope="col">SecondID</th>
<th scope="col">CODE</th>
</tr>
<tr>
<td>101</td>
<td>999999991</td>
<td onmouseover="showDiv(101,999999991)">55789</td>
</tr>
</table>
</div>
<div id="tooltip" class="tooltip">
<table>
<tr>
<td>Main Id:</td>
<td id="batch"></td>
</tr>
<tr>
<td>Second Id:</td>
<td id="vendor"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Here is a jsfiddle that demonstrates your code.
The problem (according to firebug) lies in your script. You reference a variable 'tooltip' that's not defined. Chrome and IE seem to swallow this error and continue, while firefox chokes and dies.
change this:
function showDiv(batchId, vendorId) {
tooltip.style.display = "block";
batch.innerHTML = batchId;
vendor.innerHTML = vendorId;
$('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })
}
to this:
function showDiv(batchId, vendorId) {
$('#tooltip').css('display',"block");
$('#batch').html(batchId);
$('#vendor').html(vendorId);
$('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })
}
edit: I am aware that the jQuery css function is called on $("#tooltip") twice. I was trying to keep the same flow of the code as much as possible :)
这篇关于在Firefox HTML定位问题（在IE和Chrome的工作）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
