Chrome and Safari下overflow相关问题

今天修复一个bug：购物车确认页面在chrome和Safari下出现滚动条的bugfix

看了一下代码里面有这么一段话：

html{

overflow-y: scroll;

}

但是仅仅设置这句话，overflow-x默认值就应该是visible呀！

试了一下加上overflow-x: visible; 依旧有滚动条，这样就排除了不是默认值的可能。

后来看了原来是scroll的问题，因为当使用scroll时chrome和Safari默认是要显示那个滚动条的，即使不出现溢出也会出现滚动条印痕的。所以致使宽度变窄了，让下面也出现滚动条。

 

最后的解决办法就是把overflow-y的值变成: auto就OK了！

 

其实这个是放在一个iframe里的东西，而且iframe里设置了scrolling="no"，本来是不应该出现滚动条的。但是Safari和Chrome下依旧会出现。具体参考：http://www.w3help.org/zh-cn/causes/RX9009

 

里面有这么一段话：

在 Chrome Safari 中，虽然 IFRAME 元素的 scrolling 属性为 "no"，但若其子页面的 HTML 或 BODY 元素的 'overflow' 特性为 'scroll'，则 IFRAME 仍会被渲染上滚动条。

在 IE Chrome Safari 中，IFRAME 元素引入的子页面 HTML 元素的 "overflow:hidden" 会使 IFRAME 元素的 scrolling 属性失效，IFRAME 元素不会出现滚动条。

 

就是这些了。