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

Question

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

看看this fiddle。目标是粉红色框填满宽度可用的 space（margin-left 在 CSS 中定义的间隙）并且它具有与黄色部分相同的高度。不幸的是，只有第一个属性 (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 中的一些文本应该 return 正确的宽度值，但即使这样也不起作用。你不能用 IE8 在 jQuery 中堆叠 CSS 属性，这些属性都依赖于 return 一个值的函数吗？

Answer 1

IE8 和更低 return "auto"（默认值）在 $this.css("marginRight") 和 "medium" 上 $this.css("borderRightWidth") 和 $this.css("borderLeftWidth") 所以 parseInt("auto") 和 parseInt("medium") 将 return NaN
您可以像这样 CSS 将这些属性的默认值设置为 0

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

或者您可以在每个 parseInt() 之后添加 || 0 这样每个 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);
    }
});

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

Stacking jQuery CSS declaration doesn't work in IE8

css

jquery

internet-explorer-8