jQuery.css() 仅用于 IE 样式

Question

我正在使用 jQuery 来定位子菜单中的元素。 html 看起来像:

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

菜单有position:relative，子菜单有position:absolute。 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。)

我尝试更改第二条语句以将 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 中的 * 字符那样的 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);
}