html - CSS 媒体查询问题(滚动条)

标签 html css browser

我在 Firefox 中遇到 css 媒体查询问题。它在 Chrome 中工作正常,就像我制作了两个 DIV 并想要一个滚动条一样。如果我将 firefox 的屏幕大小减小到 800px,那么两个 DIV 都会崩溃,并且在一些像素之后媒体查询可以工作,但在 Chrome 中不会发生这种情况。

检查这个 fiddle http://jsfiddle.net/RMvqC/2/

最佳答案

我通过在元素头部调用“mqGenie”javascript 解决了这个问题。

现在我的媒体查询宽度在 Chrome、Safari、Firefox 和 IE 上工作正常(具有相同的值),无论是否有滚动条。

此 javascript 调整浏览器中的 CSS 媒体查询,将滚动条宽度包含在视口(viewport)宽度中,以便它们以预期大小触发。

您可以从这个网址下载:

http://stowball.github.io/mqGenie/

关于html - CSS 媒体查询问题(滚动条),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42879200/

相关文章:

html - 悬停时的关键帧动画

html - IOS8 : whole page scrolls down when input in fixed footer gets focus

javascript - window.location.href 附加而不是替换

browser - 图像加载然后消失

javascript - 单击时使用 ng-hide 隐藏表格?

javascript - 使用 CSS 或 JavaScript 限制页面大小或限制位置以防止重叠

html - 在移动设备上,如何在点击超链接时设置其样式?

javascript - 让导航栏出现在白色背景的滚动条上

python - 为什么 tempfile 似乎在 with 语句中删除了自身?

ajax - 浏览器自动完成/保存的表单不适用于ajax请求