众所周知，IE是最容易出现兼容性问题的浏览器，而兼容性最好的解决方案是：
请下载最新版chrome浏览器
回到正题，在银行和国企的开发项目中，还是经常得兼容IE浏览器的，XP+IE8的配置是真的还存在，硬着头皮也得做。
问题描述
当原始内容过大时，在IE中可以使用zoom或者transform:scale()来进行缩放，但是在IE缩小之后会出现白边问题，并且滚动条会按照初始状况（缩放前的大小）计算，效果如图：
这里设置了一个紫色块代替主体内容，宽度为3000px，缩放1/10为300px但是在IE下运行可以看到，虽然主体已经很小，但是还是出现了纵向和横向滚动条，并且多余内容均为空白，用户体验不佳。
上述源码如下，大家可以本地运行，看看在IE和其他浏览器中的差别：
<body style="zoom: 0.1;">
<div style="height: 2000px;width: 3000px; background-color: blueviolet"></div>
</body>
解决方案
1、首先禁用原本body产生的滚动条
2、在缩放之前，外层div和主体内容宽高一致，均超出屏幕
3、此时计算
窗口宽度/主体内容宽度作为缩放系数（可能需要考虑滚动条等其他宽度影响，本文按照12px初步计算了一下滚动条)，在body上使用zoom缩放，缩放后如图
4、在主体内容外层套一层
div，这层div的宽度根据窗口宽度/缩放系数计算得到，初值应该保持和主体内容一致，此时没有横向滚动条，待窗口宽度减小，外层div宽度小于主体内容宽度，出现滚动条
代码实现
代码实现中，在窗口大小变更时，动态调整外层div大小，并添加了一个防抖函数
<body>
<div id="out" style="width: 3000px;overflow-y:auto;background-color: #000;">
<div id="inner" style="height: 10000px;width: 3000px; background-color: blueviolet"></div>
</div>
</body>
<script>
// 按照滚动条宽度为12px计算缩放比例
var defaultZoom = (document.documentElement.clientWidth-12) / 3000
function getWindowInfo () {
const windowInfo = {
width: document.documentElement.clientWidth,
hight: document.documentElement.clientHeight
}
console.log(windowInfo)
// 调整外层div宽高
document.getElementById('out').style.zoom = defaultZoom
document.getElementById('out').style.height = document.documentElement.clientHeight / defaultZoom + 'px';
document.getElementById('out').style.width = document.documentElement.clientWidth / defaultZoom + 'px';
}
// 防抖函数
function debounce (fn, delay) {
let timer;
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
fn();
}, delay);
}
};
const cancelDebounce = debounce(getWindowInfo, 50);
// 添加监听器
window.addEventListener('resize', cancelDebounce);
</script>
总结
本质上，其实就是手动添加一层div，代替原本的body作为背景，并根据窗口大小进行缩放，主体内容根据外层div出现滚动条，避免原生body出现的问题。
