Question

我在ColdFusion中创建了一个简单的工具提示自定义标记，它在IE怪癖模式下运行良好。但是现在我们正在转向跨浏览器支持，并且当Firefox进入严格模式时，放置脚本无法正常工作。该代码旨在将工具提示放置在用户悬停的元素的正下方，但在严格模式下，工具提示反过来显示为大约12-13像素。

有人可以告诉我为什么会这样吗？是否为悬停元素报告的“顶部”是错误的，还是工具提示元素的绝对定位工作不正确？

下面是一些显示问题的简化测试代码;删除'DOCTYPE'标记以使其正常工作。请注意，这在怪异模式和标准模式下都可以在IE8上正常工作。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="common/css/standard.css" media="screen">
        <link rel="stylesheet" type="text/css" href="common/css/standard_projector.css" media="projection">
        <title>OTIS Shell</title>
        <script>
                var stillOver = 0;

                function tipShowHide(tipID, deed) {
                    for (i=1; i<=numTips; i++) {
                        if (i != stillOver) {
                            document.getElementById('ToolTip' + i).style.visibility         = 'hidden';
                            document.getElementById('ToolTip' + i).style.display            = 'none';
                        }
                    }
                    if (stillOver == tipID) {
                        if (deed == 1) {
                            tipTop = getRealTop(document.getElementById('ToolTipParent' + tipID)) + document.getElementById('ToolTipParent' + tipID).offsetHeight;
                            tipLeft = getRealLeft(document.getElementById('ToolTipParent' + tipID));

                            tipTop = getRealTop(document.getElementById('ToolTipParent' + tipID)) + document.getElementById('ToolTipParent' + tipID).offsetHeight;

                            document.getElementById('ToolTip' + tipID).style.top        = tipTop + 'px';
                            document.getElementById('ToolTip' + tipID).style.left       = tipLeft + 'px';
                            document.getElementById('ToolTip' + tipID).style.visibility = 'visible';
                            document.getElementById('ToolTip' + tipID).style.display    = 'block';;
                        } else {
                            stillOver = 0;
                            document.getElementById('ToolTip' + tipID).style.visibility = 'hidden';
                            document.getElementById('ToolTip' + tipID).style.display    = 'none';
                        }
                    }
                }

                function tipOver(tipID, tipDelay) {
                    stillOver = tipID;
                    setTimeout("tipShowHide(" + tipID + ", 1)", tipDelay);
                }

                function getRealLeft(el) {
                    if (arguments.length==0)
                        el = this;
                    xPos = el.offsetLeft;
                    tempEl = el.offsetParent;
                    while (tempEl != null){
                        xPos += tempEl.offsetLeft;
                        tempEl = tempEl.offsetParent;
                    }
                    return xPos;
                }

                function getRealTop(el) {
                    if (arguments.length==0)
                        el = this;
                    yPos = el.offsetTop;
                    tempEl = el.offsetParent;
                    while (tempEl != null){
                        yPos += tempEl.offsetTop;
                        tempEl = tempEl.offsetParent;
                    }
                    return yPos;
                }


            var numTips = 1;
        </script>
    </head>
    <body>
        <DIV ID="ToolTip1" style="z-index:999; position:absolute; top:0px; left:0px; visibility:hidden; display:none; width:685px; color:#000000; border:1px solid #000000;  background-color:#ffffee;" >
            <table style="width:200px;">
                <tr valign="top">
                    <td style="width:350px;">
                        <span style="text-decoration:underline; font-weight:bold;">Test Stuff</span><br>

                        Test text
                    </td>
                </tr>
            </table>
        </DIV>
        <SPAN ID="ToolTipParent1" ONMOUSEOVER="tipOver(1, 1000);" ONMOUSEOUT="tipShowHide(1, 2);">
            <div id="dynaKeyDiv" align="left" class="tableControlHeaderDiv" style="width:#tableWidth#px;">
                <table id="dynaKeyTable" border="1" class="tableControlHeader" cellpadding="2" cellspacing="0" style="width:#tableWidth#px;">
                    <tr>

                        <td style="width:100%; font-weight:bold;">
                            Test Element
                        </td>
                    </tr>
                </table>
            </div>
        </SPAN> 
    </body>
</html>

Answer 1

div内有span无效。您应该使用validator来检查这些类型的错误。

如果您对div元素使用ToolTipParent1，则问题就会消失。

绝对定位4.01严格的FF元素

1 个答案: