在不影响移动IE10的情况下隐藏滚动条以便在Firefox中响应设计视图？

在Firefox中的响应式设计视图包括一个在测试宽度内的垂直滚动条，这使得预览网站相比，真正的移动设备没有滚动条稍微不舒服。所以我加了在不影响移动IE10的情况下隐藏滚动条以便在Firefox中响应设计视图？

html{ overflow-y: hidden; }

我的CSS。虽然这对于桌面测试非常适用，但我检查过的所有iOS设备以及大多数Android设备也完全适用于Windows Phone 8上的IE10：当您使用导航和表单时，页面开始像疯了似的跳跃，有时甚至显示一个空白屏幕，如果稍微滚动就会消失。

我花了几天的时间才弄清楚这个问题，因为我在一个相当复杂的网站上工作，所以只是为了让每个人都知道谁有类似的问题。

在Firefox中使用响应式设计视图时如何避免这种情况？

与此同时，我已切换到响应式预览书签（http://lab.maltewassermann.com/viewport-resizer/），无论如何都不显示滚动条。 Mozilla似乎在即将到来的版本22（http://www.youtube.com/watch?v=SGCbIMH3gMM）中用“移动滚动条”解决了这个问题。

2013-04-28 elfo78

也许你可以临时为html添加一个css类，body {max-width：100％; overflow-y：hidden} – 2013-04-28 10:30:28

感谢您的快速回复，John。 IE10手机也因此而大吃一惊，所以你真的必须暂时将其添加到桌面测试中，也许用一些浏览器嗅探JavaScript。 – elfo78 2013-04-28 10:49:32

根据我的理解，专门为mozilla编写风格将解决此问题。

eg: @-moz-document url-prefix() 
    { 
     html{ overflow-y: hidden; } 
    }

将专门针对mozilla的代码放置到样式表的底部。

2013-08-08 16:52:51

Firefox根据操作系统首选项显示滚动条。如果您使用的是Mac OSX Mountain Lion（10.8），请打开系统首选项>常规并选择显示滚动条...滚动时。

我记得，这是安装Mountain Lion时的默认设置。当我第一次升级时，我开始总是显示滚动条，以避免模糊滚动区域的内容。我可能宁愿测试一个虚拟机，而不是改变我的操作系统设置。

2013-10-18 01:29:08 joveyol

回答