CSS媒体查询问题（滚动条）

Question

我在Firefox中使用CSS媒体查询时遇到问题。在Chrome中它可以正常工作，就像我制作了两个DIV并想要一个滚动条一样。如果我将Firefox的屏幕尺寸减小到800像素，则两个DIV都会崩溃，并且在进行某些像素的媒体查询后，但在Chrome中不会发生这种情况。

Answer 1

基于Firefox和Webkit的浏览器以不同的方式呈现滚动条。在Firefox中，MediaQuery认为滚动条的宽度是屏幕宽度的15px，但是在基于Webkit的浏览器中，滚动条的宽度不是屏幕宽度。因此，这就是浮动的DIV在Firefox中崩溃的原因。

我用CSS做过一些事情，可能对您有帮助。

        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;
            }
        }