问题描述
当一个元素的 ‘overflow-x’ 或 ‘overflow-y’ 指定值为 ‘hidden’,另一个特性的指定值为 ‘visible’ 时, 该元素最终渲染使用的 ‘overflow-y’ 或 ‘overflow-x’ 值不同。IE6 IE7 IE8 使用 ‘hidden’,其它浏览器使用 ‘auto’。
对于 ‘overflow-x’ 和 ‘overflow-y’ 的组合渲染,所有浏览器均依照规范处理;
当 ‘overflow-x : hidden’ 且 ‘overflow-y : visible’ 时,IE6 IE7 IE8 中将 ‘overflow-y’ 渲染为 ‘hidden’,其它浏览器则渲染为 ‘auto’;
在 IE6 IE7 IE8 中所有容器的 ‘overflow-y’ 计算值都为 ‘visible’,而其他浏览器中其值都为 ‘auto’。
由于 IE6 IE7(Q) IE8(Q) 中存在容器 ‘width’ 或 ‘height’ 的设定值在不足以容纳其内容时将被撑大的问题,导致渲染结果与 IE7(S) IE8(S) 的差异, 而从视觉效果上我们也无法判定容器在渲染时 ‘overflow-y’ 使用的是哪个值,这里猜测情况同 IE7(S) IE8(S)。
对于 ‘overflow-y’ 的计算值与渲染效果不一致,有可能是 IE6 IE7 IE8 对 ‘overflow-x’ 和 ‘overflow-y’ 的实现有问题, 也有可能是 currentStyle 实现的问题,这里不做过多分析。
解决方案
1.同时设置 ‘overflow-x’ 和 ‘overflow-y’ 的值,不要出现其中之一为 ‘hidden’ 时,而另一个是 ‘visible’ 的情况;
2.避免编写依赖指定值为 ‘visible’ 的 ‘overflow-x’ 和 ‘overflow-y’ 特性的计算值的代码。