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

问题描述

我有在Firefox的CSS媒体查询问题。它的工作原理正确，铬像我做了两个div并希望滚动条。如果我减少火狐的屏幕尺寸高达800像素那么这两个资料核实崩溃经过一番像素媒体查询工作，但不是发生在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屋！