jquery - IE位置问题中的工具提示

Question

这是我用于悬停在其元素上方的工具提示的一些代码，因此它不会在下方弹出并强制用户滚动以查看它。它在除 IE 之外的所有浏览器中都可以正常工作。在 IE 中，它位于元素下方而不是上方。

如何修复 IE 定位错误？我很难过。

<style type="text/css"> 
.ToolTip 
{
    border: 2px solid black;
    background:#fff;
    display:none;
    padding:10px;
    width: 325px;

    z-index:1000;
    -moz-border-radius:4px;
}
</style> 

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {


    $(".tip_holder").hover(
                function () {
                    var $containerWidth = $(this).width();
                    var $offset = $(this).offset();

                    $('#ToolTipPopUp')
                        .prepend('<div id="tooltip" class="ToolTip">' + $("#ToolTipHolder").text() + '</div>');

                    var $tipWidth = $('#tooltip').width();
                    var $tipHeight = $('#tooltip').height();

                    $('#tooltip').css({
                        'top': $offset.top - ($tipHeight + 15),
                        'left': $offset.left - ($tipWidth - $containerWidth) / 2,
                        'position': 'absolute',
                        'display': 'block'
                    });

                },
                function () {
                    $('#tooltip').remove();
                }
            );

        });

    </script>


<img src="/Content/Images/WhatsThis.png" class="tip_holder" />
                    <div>
                        <div id="ToolTipPopUp"></div>     
                        <span id="ToolTipHolder" style="display:none;">For Visa, MasterCard
                            and Discover, the card verification number is a 3-digit security code that is printed
                            on the back of your card.
                            <br />
                            <br />
                            For American Express, the card verification number is 4-digits and appears on the
                            front of the card. The number appears on the signature strip after the last four
                            digits of your account number. 
                        </span>
                    </div>

Answer 1

IE 会把你逼疯的。如果您不介意使用 javascript 来解决问题，您可以使用 http://rafael.adm.br/css_browser_selector/或者您可以使用条件语句为 IE 使用不同的样式表，如下所示:<!--[if IE 8]> link your stylesheet here <![endif]-->您可以使用几个不同版本的 if IE 语句，只需谷歌“IE if 语句”。