你如何混合jQuery和hacks？

Question

假设我想将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");

有谁有什么想法吗？

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

Answer 2

只需使用jQuery应用一个CSS类，并在IE6和7中使用条件注释为该类指定不同的规则，这将大大简化您的Javascript。

Answer 3

这可能会有一些错误，但它似乎对我来说很好。如有必要，请进行编辑。在你的javascript中的某个地方添加这段代码将会挂钩到jQuery.css中，并使IE7正确地显示内嵌块。

(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');