你如何混合使用 jQuery 和 IE CSS hack？答案

【问题标题】：How do you mix jQuery and IE CSS hacks?你如何混合使用 jQuery 和 IE CSS hack？
【发布时间】：2011-10-18 22:19:46
【问题描述】：

假设我想将 div 的 display 属性设置为 inline-block。在 CSS 中，我会执行以下操作：

#divid {
    display:inline-block;

    /* And now for IE6 and IE7 */
    zoom:1;
    *display:inline;
}

但现在假设我希望能够使用纯 JavaScript 或 jQuery 将 div 的显示属性动态更改为内联块。还假设我不知道相关页面的 HTML 和 CSS；我刚刚通过了 div，我需要更改它的属性。如果我不担心 IE6 和 IE7，那就简单了：

$("#divid").css("display", "inline-block");

但是尝试处理 IE6 和 IE7 并不简单。以下不起作用：

$("#divid").css("*display", "inline");

有人有什么想法吗？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

编辑：正如@thirtydot 指出的那样，这是来自.animate 方法，在执行.css 时不会应用。

我能想到的最好的选择是自己使用类似的东西。您可以检测内联块元素是否需要 layout hack，并根据此设置属性。

if ( !jQuery.support.inlineBlockNeedsLayout ) {
    $("#divid").css("display", "inline-block");
} else {
    $("#divid").css("display", "inline");
    $("#divid").css("zoom", "1");
}

-- 旧答案--

如果你只做$("#divid").css("display", "inline-block");，jQuery 应该会自动完成它

来自 jQuery source

if ( jQuery.css( this, "display" ) === "inline" &&
        jQuery.css( this, "float" ) === "none" ) {
    if ( !jQuery.support.inlineBlockNeedsLayout ) {
        this.style.display = "inline-block";

    } else {
        display = defaultDisplay( this.nodeName );

        // inline-level elements accept inline-block;
        // block-level elements need to be inline with layout
        if ( display === "inline" ) {
            this.style.display = "inline-block";

        } else {
            this.style.display = "inline";
            this.style.zoom = 1;
        }
    }
}

【讨论】：

您没有显示您在哪个函数中找到它。我只能在.animate() 中找到它，而不是在.css() 中找到它：github.com/jquery/jquery/blob/master/src/effects.js#L183。你能验证你的答案吗？
嗯，很好地使用 $("#divid").css("display", "inline-block") 不会使 div 像 IE6 或 IE7 中的内联元素一样（例如，文本直接在结束标记出现在新行之后）。我也在使用最新版本的 jQuery (1.6.1)。
@thirtydot，对不起，你是对的。我没有注意到这只是在.animate 方法中。

【解决方案2】：

只需使用 jQuery 应用 CSS 类，并使用条件 cmets 为 IE 6 和 7 中的该类指定不同的规则。这将大大简化您的 Javascript。

【讨论】：

我希望有一个仅限 jQuery 的方法，所以我知道如何在 jQuery 插件的上下文中执行它。

【解决方案3】：

这可能有一些问题，但对我来说似乎没问题。如有必要，请编辑。在 javascript 中的某处添加此代码将挂钩到 jQuery.css 并使 IE7 正确显示 inline-block。

(function($) {
    // first, check to see if cssHooks are supported
    if ( !$.cssHooks ) {
        return;
    }

    $.cssHooks["display"] = {
        get: function( elem, computed, extra ) {
            if($.support.inlineBlockNeedsLayout && elem.style.display == 'inline' && elem.style.zoom == '1') {
                return 'inline-block';
            }
            return elem.style.display;
        },
        set: function( elem, value ) {
            try {
                if($.support.inlineBlockNeedsLayout && value == 'inline-block') {
                    elem.style.zoom = '1';
                    elem.style.display = 'inline';
                    return;
                }
                elem.style.display = value;
            } catch(e){}
        }
    };
})(jQuery);

用法：

$('selector').css('display', 'inline-block');

【讨论】：