CSS Sprite图像高度异常：Firefox/IE容器过度拉伸

我之前碰到过一模一样的情况，这问题根源在于zoom和transform: scale在不同浏览器里的渲染逻辑差异：Chrome会同步调整元素的布局盒模型来匹配缩放后的视觉尺寸，但Firefox和IE里，transform: scale只是做视觉上的缩放，元素本身的width和height还是保留原始的996px，再加上overflow: hidden也没法正确截断这个“隐形”的大尺寸，所以容器就会看起来向上过度展开了。

给你几个靠谱的解决方案：

方案1：直接使用缩放后的实际尺寸（最推荐） #

既然你要缩放到0.03倍，那直接把元素的宽高设置成原始尺寸×缩放比例的结果（996×0.03≈30px），完全不需要用scale或zoom，这样所有浏览器的布局都会一致：

.your-sprite-class {
  background: url('https://coinswitch-static-resource-dev.s3-ap-southeast-1.amazonaws.com/ui/public/images/cspro-sprite.png') no-repeat;
  overflow: hidden;
  text-indent: -9999px;
  text-align: left;
  /* 调整背景位置到缩放后的对应值：-10px×0.03=-0.3px，取整或保留小数都可以 */
  background-position: -0.3px 0;
  /* 直接设置缩放后的实际尺寸 */
  width: 30px;
  height: 30px;
}

方案2：用外层容器限制显示区域（保留原始缩放逻辑） #

如果一定要保留原始宽高和scale缩放，那就给元素套一个外层容器，外层容器设置成缩放后的尺寸，同时加上overflow: hidden，这样就能截断内层缩放后的元素，避免布局异常：

<div class="sprite-wrapper">
  <div class="your-sprite-class"></div>
</div>

.sprite-wrapper {
  /* 缩放后的实际尺寸 */
  width: 30px;
  height: 30px;
  overflow: hidden;
}
.your-sprite-class {
  background: url('https://coinswitch-static-resource-dev.s3-ap-southeast-1.amazonaws.com/ui/public/images/cspro-sprite.png') no-repeat;
  background-position: -10px 0;
  width: 996px;
  height: 996px;
  transform: scale(0.03);
  transform-origin: 0 0;
  /* 去掉zoom，避免和transform冲突 */
}

方案3：IE专属兼容处理 #

如果还要兼容IE8及以下，它不支持transform，可以单独用zoom，同时调整背景位置和宽高来匹配缩放比例：

/* 仅对IE8及以下生效的hack */
@media \0screen {
  .your-sprite-class {
    zoom: 0.03;
    width: 30px;
    height: 30px;
    /* zoom会同时缩放背景位置，所以要把原始-10px乘以缩放比例 */
    background-position: -0.3px 0;
  }
}

核心思路就是让元素的布局盒模型尺寸和视觉显示尺寸保持一致，要么直接用缩放后的尺寸，要么用外层容器来“裁剪”缩放后的元素，这样就能解决Firefox和IE里的容器展开异常问题了。

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