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

Question

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

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

Answer 1

我通过调用项目负责人中的"mqGenie"javascript解决了这个问题.

现在,我的媒体查询的宽度在Chrome,Safari,Firefox和IE上运行正常(具有相同的值),有或没有scroolbars.

此javascript在浏览器中调整CSS媒体查询,这些浏览器在视口宽度中包含滚动条宽度,因此它们以预期大小激发.

您可以从此网址下载:

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

Answer 2

Firefox&Opera遵循W3C规范,其中包括媒体查询宽度中的滚动条宽度(原因可能是避免无限循环,如此处的评论中所述),而Webkit则不然(可能因为它们认为没有意义)

有一个解决方法(我只在FF上测试过这个),显然如果你强制滚动条一直可见,那么宽度现在将与Webkit一致.这是代码:

html
{
   overflow:hidden;
   height:100%;
}
body
{
   position:relative;
   overflow-y:scroll;
   height:100%;
   -webkit-overflow-scrolling:touch; /* So iOS Safari gets the inertia & rubber-band effect */
}

如果你只想将它应用于FF&Opera,你可以使用CSS hacks:

/* Firefox */
@-moz-document url-prefix()
{
    html
    {
        overflow:hidden;
        height:100%;
    }
    body
    {
        position:relative;
        overflow-y:scroll;
        height:100%;
        /*-webkit-overflow-scrolling:touch;*/
    }
}

/* Opera */
x:-o-prefocus, html
{
    overflow:hidden;
    height:100%;
}
x:-o-prefocus, body
{
    position:relative;
    overflow-y:scroll;
    height:100%;
}

不言而喻,需要注意的是滚动条在任何时候都是可见的,这可能是一个好的妥协.

Answer 3

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