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

问题描述

当一个元素的 'overflow-x' 或 'overflow-y' 指定值为 'hidden',另一个特性的指定值为 'visible' 时, 该元素最终渲染使用的 'overflow-y' 或 'overflow-x' 值不同。IE6 IE7 IE8 使用 'hidden',其它浏览器使用 'auto'。

  1. 对于 'overflow-x' 和 'overflow-y' 的组合渲染,所有浏览器均依照规范处理;
  2. 当 'overflow-x : hidden' 且 'overflow-y : visible' 时,IE6 IE7 IE8 中将 'overflow-y' 渲染为 'hidden',其它浏览器则渲染为 'auto';
  3. 在 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' 特性的计算值的代码

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:CSS overflow-x与overflow-y不同的兼容 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/overflow-x.html)

发表评论

请登录后发表评论: