Firefox 中的 HTML 位置问题(适用于 IE 和 Chrome）

HTML Position Issue in Firefox (Works in IE and Chrome)

本文关键字：IE Chrome 适用于 中的 HTML 位置 问题 Firefox      更新时间：2023-09-26

我有以下代码。当我将鼠标悬停在"代码"上时，它应该在位置 100 X100 上显示div。它在IE和Chrome中工作正常;但是div 不会移动到 Firefox 中的所需位置。 需要更改什么才能使其正常工作？

注意：我使用以下代码来定位div

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

-完整代码 --

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

这是一个演示代码的 jsfiddle。

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

问题（根据萤火虫）出在您的脚本中。 引用未定义的变量"工具提示"。 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函数在$（"#tooltip"）上被调用了两次。 我试图尽可能保持相同的代码流:)

若要使"绝对"用作元素的位置，父元素的位置必须设置为相对或绝对。那是在您的情况下，将css"位置：相对"添加到具有鼠标悬停事件的TD。

jQuery CSS 方法应该这样使用：

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

最好以这种方式处理脚本中的事件：

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

并且为了定位元素，它的父元素绝对应该相对定位。

试试这种方式

                <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>
相关文章：