Firefox 中的 HTML 位置问题（适用于 IE 和 Chrome）答案

【问题标题】：HTML Position Issue in Firefox (Works in IE and Chrome)Firefox 中的 HTML 位置问题（适用于 IE 和 Chrome）
【发布时间】：2012-04-24 00:31:49
【问题描述】：

我有以下代码。当我将鼠标悬停在“代码”上时，它应该在位置 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.net 作为这样的例子。创建概念证明对您有好处，并且对于那些试图理解您的问题的人来说更容易。 “保存”后，您可以粘贴链接。

标签： javascript jquery asp.net html css

【解决方案1】：

这是一个演示您的代码的 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" })

}

edit：我知道 jQuery css 函数在 $("#tooltip") 上被调用了两次。我试图尽可能保持相同的代码流:)

【讨论】：

你能回答stackoverflow.com/questions/10138108/html-css-flow-layout-issue吗？
你能回答stackoverflow.com/questions/10141148/…

【解决方案2】：

试试这个方法

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

【讨论】：

【解决方案3】：

jQuery CSS 方法应该这样使用：

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

这样处理脚本中的事件会更好：

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

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

【讨论】：

Lijo 对 .css() 的使用是有效的。它允许您一次设置多个样式属性。但是，是的，编码的事件绑定比声明的更好。

【解决方案4】：

要使“绝对”作为元素的位置，父元素必须将其位置设置为相对或绝对。也就是说，在您的情况下，将 css“位置：相对”添加到具有 onmouseover 事件的 TD。

【讨论】：

位置：绝对；指具有除静态以外的位置（相对或绝对，不确定与固定父级和绝对子级的交互）的第一个父级。如果没有找到父元素，则元素相对于视口定位。因此，如果他希望将其定位到视口，他的代码将起作用。
我猜它不应该定位在视口中，因为它是 UI 元素的工具提示。
这可能是真的。有 jquery 库和其他辅助工具可以相对于特定元素定位它。 craigsworks.com/projects/qtip2 是一个非常好的工具提示。