Подсказка в проблемах с позицией в IE - PullRequest
Новая
       5

Подсказка в проблемах с позицией в IE

0 голосов
/ 27 сентября 2010

Вот некоторый код, который я использую для всплывающей подсказки над своим элементом, поэтому он не всплывает ниже и не заставляет пользователя прокручивать страницу, чтобы увидеть его.Он отлично работает во всех браузерах, кроме 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>

1 Ответ

2 голосов
/ 27 сентября 2010

IE сведет вас с ума.Если вы не возражаете против использования javascript для решения проблемы, вы можете использовать http://rafael.adm.br/css_browser_selector/ или условные выражения, чтобы использовать другую таблицу стилей для IE, например: <!--[if IE 8]> link your stylesheet here <![endif]--> Вы можете использовать только несколько разных версий if IEзаявления, просто Google "IE, если заявления".

...