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中，这可以通过以下方式完成：$(this).css("margin-left", $(this).parent().position().left - 1);在IE7中$(this).css("margin-left", -1 * ($(this).siblings('a').width() + 51));将正确对齐菜单（51表示填充，“this”表示两种情况下的div.submenu。）

我尝试更改第二个语句以更改“* margin-left”而不是“margin-left”的css，但这似乎不起作用。如何告诉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-hacks。尝试使用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团队不推荐使用此功能。尽可能使用特征检测。

Answer 3

使用条件评论

<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->

阅读http://www.quirksmode.org/css/condcom.html

jQuery.css（）for IE Only样式

3 个答案: