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语句，只是google“IE if statements”。

IE位置问题的工具提示

1 个答案: