在前端开发中，IE6 的遗留问题一直是一个头痛的问题。其中之一便是当元素的宽度设置为 auto 时，IE6 的表现与其他现代浏览器存在差异，容易出现参差不齐的情况。
问题描述
当一个元素的宽度设置为 auto 时，浏览器通常会根据其内容和父元素的宽度进行自适应调整。然而在 IE6 中，这种自适应调整会出现问题，导致元素的宽度无法正确计算。
例如，我们可以创建一个占满整个屏幕的 div 元素，并设置其内部有三个等宽的 span 元素：
<div class="container"> <span>Box 1</span> <span>Box 2</span> <span>Box 3</span> </div>
然后将它们设为等宽，并让它们均匀分布：
-- -------------------- ---- ------- ---------- - ------ ----- ----------- -------- - ---------------- - -------- --- -------- ------------- ------ ----- - ---------- ---- - -------- ------------- ------ ----------- -
在现代浏览器中，这样做可以很好地实现等宽分布的效果，如下图所示：
然而在 IE6 中，这样做则会出现参差不齐的情况，如下图所示：
解决方案
为了解决 IE6 的这个问题，我们可以使用 CSS Reset 进行样式的标准化处理。CSS Reset 是一种常见的前端技术，它可以通过将默认样式重置为一致的值，在各个浏览器中实现一致的效果。以下是一些常见的 CSS Reset 库，可以根据需要选择使用：
在使用 CSS Reset 之后，我们可以再次尝试上面的样式，即使在 IE6 中也可以得到正确的效果。
除了使用 CSS Reset，我们还可以通过调整元素的 display 属性来解决这个问题。在上面的例子中，我们可以将 span 元素的 display 属性设为 inline-block，然后再将父元素的 letter-spacing 属性设为 -.25em，这样可以解决问题。
-- -------------------- ---- ------- ---------- - ------ ----- ---------- -- --------------- ------- - ---------- ---- - -------- ------------- ------ ----------- ---------- ----- --------------- ------- -
在这个样式中，我们将父元素的字体大小设为 0，从而消除了 inline-block 元素之间的间距。然后通过设定 letter-spacing 值来恢复父元素的字符间距，并解决了 IE6 中的宽度自适应问题。
总结
以上就是有关 IE6 下的 width: auto 问题的解决方案。当我们需要兼容 IE6 时，可以选择使用 CSS Reset 或者调整元素的 display 属性来解决这个问题。这个问题虽然已经不在现代浏览器中存在，但对于历史遗留问题的解决，仍然具有一定的指导意义。
示例代码：CodePen
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f996f0f6b2d6eab3110ba4