仅用于IE样式的jQuery.css()

Question

我使用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中，这可以通过: IE7 $(this).css("margin-left", -1 * ($(this).siblings('a').width() + 51));中的$(this).css("margin-left", $(this).parent().position().left - 1);将正确地对齐菜单( 51用于填充，" this“在这两种情况下都是指div.submenu )。

我尝试更改第二个语句，将css更改为“*margin left”而不是“margin left”，但似乎不起作用。我如何告诉jquery在IE7中使用第二行，在所有其他浏览器中使用第一行？

解决方案：

我先试了一下，因为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进行测试相关的东西。

Answer 1

你不能像JavaScript中的*-character那样使用CSS-hack。尝试使用jQuery的$.browser-object来检测浏览器和版本。对于您的特定情况，这将是：

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);
}

Answer 2

您可以使用jQuery.browser检查IE。尽管jQuery团队不推荐使用此函数。只要有可能，就使用特征检测。