Question

我正在创建一个自适应网站。我的媒体查询在Safari中运行良好，但我在Chrome和Firefox中额外获得了20px左右，导致在进入“移动模式”之前弹出水平滚动条，这会导致我的列扩展到100％。

我的媒体查询称，当达到540px时，将列扩展到100％，但Chrome似乎想要等到520px由于某种原因。我想知道我忘记的一些余量是否还在那里。我可以为你们上传我的网站：http://dustindowell.com/site。

我的媒体查询在这里，但我认为这与额外空间无关。

@media (orientation:portrait){
    div.pageContainer,
    div.bannerTitle{ width:auto;}

    div.mainColumn{
        width:-webkit-calc(100% - 1.5em);
        width:        calc(100% - 1.5em);
        box-shadow:0 .125em 0 0 hsla(0,0%,0%,.1);}

    div.postPreviewContainer{
        width:-webkit-calc(100% - 1.5em);
        width:        calc(100% - 1.5em);}

    div.toggler{
        margin-top:1.5em; /* makes room for banner title */
        margin-bottom:1.5em;} /* pushes down banner title */

    div.sideColumn{
        width:-webkit-calc(100% - 1.25em);
        width:        calc(100% - 1.25em);}
}

@media (orientation:portrait)
and (min-width:540px) and (max-width:1080px){
    div.postPreviewContainer{
        width:-webkit-calc((100% / 2) - 1.5em);
        width:        calc((100% / 2) - 1.5em);}
}

Answer 1

事实证明，chrome和firefox不包含滚动条作为宽度的一部分，而safari则包含。我不喜欢这种行为，我必须看看我能做些什么来解决它。

Chrome中的媒体查询大约20像素

1 个答案: