CSS overflow-x与overflow-y不同的兼容

问题描述

当一个元素的 ‘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’ 特性的计算值的代码。