jquery - 堆叠 jQuery CSS 声明在 IE8 中不起作用

Question

This fiddle 提供了我正在努力实现的精简示例。缺少很多内容，但所有相关代码都在。

看看this fiddle .目标是粉红色框填满宽度可用的空间(在 CSS 中由 margin-left 定义的间隙)并且它具有与黄色部分相同的高度。不幸的是，只有第一个属性 (min-height) 被应用。

$(".banana + .strawberry").css({
    "minHeight": function () {
        var $this = $(this),
            banana = $this.prev(".banana"),
            bh = banana.outerHeight();
        return bh;
    },
    "width": function () {
        // Many variables, but they allow a highly
        // customized CSS file
        var $this = $(this),
            margin_l = parseInt($this.css("marginLeft"), 10),
            margin_r = parseInt($this.css("marginRight"), 10),
            padding_l = parseInt($this.css("paddingLeft"), 10),
            padding_r = parseInt($this.css("paddingRight"), 10),
            border_l = parseInt($this.css("borderLeftWidth"), 10),
            border_r = parseInt($this.css("borderRightWidth"), 10),
            parent = $(this).parent(),
            pw = parent.width(),
            banana = $this.prev(".banana"),
            bw = banana.outerWidth();

        console.log(margin_l);
        return (pw - bw - margin_l - margin_r - padding_l - padding_r - border_l - border_r);
    }
});

出于某种原因，所有浏览器都接受此代码，但 IE8 不接受。在我的网站上，我使用的是 jQuery 1.11.2。我在仿真模式下测试了 IE8。我还尝试提醒 function 中的一些文本应该返回正确的宽度值，但即使那样也不起作用。难道你不能在 jQuery 和 IE8 中堆叠所有依赖于函数返回值的 CSS 属性吗？

Answer 1

IE8 及更低版本在 $this.css("marginRight") 上返回“auto”(默认值)和 $this.css("borderRightWidth") 上的“中等”和 $this.css("borderLeftWidth")所以parseInt("auto")和 parseInt("medium")将返回 NaN
您可以像这样将 CSS 上这些属性的默认值设置为 0

.strawberry {
    background: #FC5A8D;
    margin-left: 10px;
    padding: 8px;
    margin:0;
    border:0;
}     

或者您可以添加 || 0在每个 parseInt() 之后所以每个 var 默认为 0 而不是像这样的 NaN

$(".banana + .strawberry").css({
    "minHeight": function () {
        var $this = $(this),
            banana = $this.prev(".banana"),
            bh = banana.outerHeight();
        return bh;
    },
    "width": function () {
        var $this = $(this),
            margin_l = parseInt($this.css("marginLeft"), 10)||0,
            margin_r = parseInt($this.css("marginRight"), 10)||0,
            padding_l = parseInt($this.css("paddingLeft"), 10)||0,
            padding_r = parseInt($this.css("paddingRight"), 10)||0,
            border_l = parseInt($this.css("borderLeftWidth"), 10)||0,
            border_r = parseInt($this.css("borderRightWidth"), 10)||0,
            parent = $(this).parent(),
            pw = parent.width(),
            banana = $this.prev(".banana"),
            tw = banana.outerWidth();        
            return (pw - tw - margin_l - margin_r - padding_l - padding_r - border_l - border_r);
    }
});