CSS 媒体查询问题(滚动条) [英] issue with CSS media queries(scrollbar)

问题描述

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

I am having problem with css media query in Firefox. It works correct in Chrome like I made two DIVs and want a scrollbar. If I decrease the screen size of firefox upto 800px then both DIVs collapse and after some pixels media query works but that not happens in Chrome.

检查这个小提琴 http://jsfiddle.net/RMvqC/2/

推荐答案

Firefox &基于 Webkit 的浏览器以不同的方式呈现滚动条.在 Firefox 中，MediaQuery 将滚动条的宽度视为 15px 与屏幕宽度，但在基于 Webkit 的浏览器中，它不被视为与屏幕宽度的滚动条.所以，这就是浮动的 DIV 在 Firefox 中折叠的原因.

Firefox & Webkit based browsers render the scrollbar differently. In Firefox, MediaQuery considered width of scrollbar which is 15px with the screen width, but in Webkit based browsers it's not considered scrollbar with the screen width. So, that's why the floated DIVs are collapsed in Firefox.

我用 css 做了一些东西，可能对你有帮助.(检查这个小提琴)

I did some stuff with css may be that's help you. (check this fiddle)

        html {
            /* force scrollbars */
            height: 101%;
        }
        body {
            margin: 0; 
            padding:0; 
            white-space:nowrap; 
        }  
        #box1,
        #box2 {
            display:inline-block;
            width: 400px;
            height: 200px;  
            vertical-align:top;
            white-space:normal;
        }
        #box1 {
            background: #ce0000;
             margin-right:-5px;
        }
        #box2 {
            background: #8e0000;
        }

        @media screen and (max-width: 799px) { 
            body { 
                white-space:normal; 
            }
            #box1,
            #box2 {
                width: 300px;
            }
        }

这篇关于CSS 媒体查询问题(滚动条)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！