如何适配IE浏览器实现指定class元素等高效果？

嘿，这个问题我太熟了——IE8及更低版本对现代JS方法的支持确实拉胯，咱们的脚本就是栽在了几个不兼容的API上。我给你梳理下问题点，再直接上适配后的代码：

原脚本的兼容性问题 #

• document.getElementsByClassName：IE8完全不支持这个原生方法，没法正确获取目标元素
• Array.prototype.map 和 Array.prototype.forEach：IE8不支持ES5新增的这些数组遍历方法，调用会直接报错
• 虽然Math.max.apply在IE8能用，但换成更基础的写法会更稳妥

适配后的完整代码 #

$(window).bind("load", function () {
    // 用jQuery选择器替代原生方法，自动兼容IE8
    var elements = $('.company');
    var maxHeight = 0;

    // 用传统for循环遍历，所有浏览器都支持
    for (var i = 0; i < elements.length; i++) {
        var currentHeight = elements[i].clientHeight;
        if (currentHeight > maxHeight) {
            maxHeight = currentHeight;
        }
    }

    // 再次遍历统一设置高度
    for (var j = 0; j < elements.length; j++) {
        elements[j].style.height = maxHeight + "px";
    }
});

关键修改说明 #

• 替换元素获取方式：既然你已经引入了jQuery，直接用$('.company')是最省心的——jQuery内部已经做了全浏览器兼容的元素查询，不用自己写复杂的兼容逻辑
• 改用for循环遍历：放弃ES5的数组方法，换成所有浏览器都支持的传统for循环，彻底避开IE的兼容性坑
• 分两步计算与设置：先遍历找到最高元素的高度，再统一设置所有元素的高度，逻辑和原脚本完全一致，但兼容性拉满

如果你的项目里不能用jQuery，也可以自己实现一个兼容的class选择器，但既然已经有jQuery了，直接用它的能力是最高效的~

内容的提问来源于stack exchange，提问作者hubertimon