您如何混合使用jQuery和IE CSS hacks？

问题描述

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

有人有什么想法吗？     

解决方法

        编辑：正如@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源

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

    ,        只需使用jQuery应用CSS类，并使用条件注释为IE 6和7中的该类指定不同的规则即可。这将大大简化您的Javascript。     ,        这可能有一些问题，但是对我来说似乎正常。请根据需要进行编辑。将此代码添加到您的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\');