jQuery.css () для стиля IE Only - PullRequest
Новая
       22

jQuery.css () для стиля IE Only

3 голосов
/ 09 сентября 2010

Я использую jQuery для позиционирования элементов в подменю.HTML выглядит так: 

<div class="menu">
    <div>
        <a>Menu Option</a>
        <div class="submenu">
            <div><a>Submenu Option</a></div>
        </div>
    </div>
</div>

меню имеет положение: относительное, подменю имеет положение: абсолютное.IE8 и FF отображают подменю прямо под меню и выравнивают по левому краю.IE7 помещает подменю в линию с меню, сразу же после своего брата a.В нашем CSS мы используем "* margin-top: 40px", чтобы переместить меню в нужное место по вертикали.

В нашем javascript мы используем jquery для правильного выравнивания подменю по горизонтали.В FF и IE8 это может быть сделано через: $(this).css("margin-left", $(this).parent().position().left - 1); В IE7 $(this).css("margin-left", -1 * ($(this).siblings('a').width() + 51)); правильно выровняет меню (51 - для заполнения, и «this» относится к div.submenu в обоих случаях.)

Я пытался изменить 2-й оператор, чтобы изменить css для «* margin-left» вместо «margin-left», но это, похоже, не работает.Как я могу сказать jquery использовать 2-ю строку для IE7 и 1-ю строку для всех других браузеров?

Разрешение:

Сначала я попробовал это сделать, поскольку метод jquery .browser устарел.Это не сработало. 

<!-- [if IE 7]>
<script type="text/javascript">
    $(function () {
        $(".submenu").each(function () {
            $(this).css("margin-left", -1 * ($(this).siblings('a').width() + 51));
    });
});
</script>
<![endif]-->

Попытка снова с использованием $ .browser, и это успешно работает.Я не смог найти ничего подходящего для тестирования с использованием $ .support.

Ответы [ 3 ]

4 голосов
/ 09 сентября 2010

Вы можете использовать jQuery.browser для проверки IE. Хотя команда jQuery не рекомендует использовать эту функцию. По возможности используйте функцию обнаружения.

4 голосов
/ 09 сентября 2010

Вы не можете использовать CSS-хаки, такие как * -характер в JavaScript.Попробуйте использовать jQuery $.browser -объект для определения браузера и версии.Для вашего конкретного случая это будет: 

if ($.browser.msie && $.browser.version < 8) {
    // IE 7 or older
    $(this).css("margin-left", -1 * ($(this).siblings('a').width() + 51));
} else {
    // all other browsers
    $(this).css("margin-left", $(this).parent().position().left - 1);
}
2 голосов
/ 09 сентября 2010

используйте условные комментарии

<!--[if IE 7]> Special instructions for IE 7 here <![endif]--> читать http://www.quirksmode.org/css/condcom.html

...