0

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

我的媒体查询说在达到 540 像素时将列扩展到 100%，但 Chrome 似乎出于某种原因喜欢等到 520 像素。我想知道我忘记的一些余量是否仍然存在。我可以为你们上传我的网站：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);}
}
4

1 回答 1

1

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

于 2013-09-10T22:41:35.447 回答