Firefox中的HTML定位问题（适用于IE和Chrome）

我有以下代码。当我将鼠标移到“代码”上时，它应该在位置100 X100上显示div。它在IE和Chrome中工作正常;但div不会移动到Firefox所需的位置。需要改变什么才能使其工作？Firefox中的HTML定位问题（适用于IE和Chrome）

注：我使用下面的代码用于定位的div

$('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

--complete码 -

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

来源

2012-04-11 Lijo

使用[jsfiddle.net]（http://jsfiddle.net/）例如这样的例子。对你来说，创造一个概念证明是很好的，对那些试图理解你的问题的人来说更容易。一旦你“保存”，你可以粘贴一个链接。 – 2012-04-11 17:37:52

下面是展示你的代码的jsfiddle。

http://jsfiddle.net/6GaEA/1/

（根据萤火虫）问题就出在你的脚本。你引用了一个未定义的变量'tooltip'。 Chrome和IE似乎吞噬了这个错误，并继续，而Firefox的窒息和死亡。

改变这一点：

function showDiv(batchId, vendorId) { 

    tooltip.style.display = "block"; 

    batch.innerHTML = batchId; 

    vendor.innerHTML = vendorId; 

    $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" }) 

}

这样：

function showDiv(batchId, vendorId) { 

    $('#tooltip').css('display',"block"); 

    $('#batch').html(batchId); 

    $('#vendor').html(vendorId); 

    $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" }) 

}

编辑：据我所知，jQuery的CSS函数被调用于$（ “＃提示”）的两倍。我试图尽可能保持相同的代码流:)

来源

2012-04-11 19:04:58

谢谢，它的工作 – Lijo 2012-04-13 09:00:09

你能否回答http://stackoverflow.com/questions/10138108/html-css-flow-layout-issue？ – Lijo 2012-04-13 09:10:16

你能否回答http://stackoverflow.com/questions/10141148/css-two-column-div-layout-misaligns-when-zoom-changes – Lijo 2012-04-13 12:50:29

要为您的元素，父元素 “绝对” 工作作为位置必须将其职位设置为相对或绝对。这就是你的情况添加CSS“位置：相对”具有onmouseover事件的TD。

来源

2012-04-11 17:21:29 Dima

位置：绝对;指的是第一位拥有非静态职位（相对或绝对，不确定是否与固定父母和绝对子女互动）的职位。如果找不到父项，则该元素相对于视口进行定位。所以，他的代码会起作用，如果他想让它定位到视口。 – 2012-04-11 18:49:15

我想它不应该放在视图中，因为它是UI元素的工具提示。 – Dima 2012-04-11 18:54:58

这可能是真的。有jQuery库和其他帮助定位它相对于一个特定的元素。 http://craigsworks.com/projects/qtip2/对于工具提示是一个不错的选择。 – 2012-04-11 19:06:43

jQuery的CSS方法应该以这种方式使用：

$("#something").css(propertyName,value);

和更好地处理事件的脚本是这样的：

$("#something").mouseover(function() { 
    $("#tooltip").css("display","block"); 
    });

和定位的元素绝对其父应相对定位。

来源

2012-04-11 17:31:58 undefined

Lijo对.css（）的使用是有效的。它允许您一次设置多个样式属性。但是，是的，编码的事件绑定比声明式的更好。 – 2012-04-11 17:35:10

尝试这种方式

   <script type="text/javascript"> 
      function showDiv(batchId, vendorId) { 
       document.getElementById('tooltip').style.display = "block"; 
       document.getElementById('batch').innerHTML = batchId; 
       // batch.innerHTML = batchId; 
       document.getElementById('vendor').innerHTML = vendorId; 
       //vendor.innerHTML = vendorId; 
      } 

     </script>

来源

2012-04-11 17:49:10 srini

Firefox中的HTML定位问题（适用于IE和Chrome）

回答

相关问题