具有 100% 宽度的 CSS 元素位于视口之外答案

【问题标题】：CSS element with 100% width falls outside of viewport具有 100% 宽度的 CSS 元素位于视口之外
【发布时间】：2016-09-08 18:45:15
【问题描述】：

我这里有代码，它根据用户的屏幕尺寸确定要使用的广告尺寸。我还这样做了，如果屏幕太小，广告会自动居中。

当我使用 google page-speed 见解运行页面时，我收到以下消息：

页面内容是 421 CSS 像素宽，但视口只有 411 CSS 像素宽。以下元素位于视口之外：

广告元素位于视口之外。

这向我表明，元素 Q 的左右边距总为 10 像素，但我从未为 Q 声明过这样的边距。谷歌测试中的广告单元是 320x100

HTML：

<div id="Q">
    Advertisement<br>
    <ins id="Z">
        <!-- adsense box -->
    </ins>
</div>

CSS：

@media screen and (max-width:450px){
    #Q{
        width:100%;
        margin:0
    }
    #Q,#Z{
        margin:auto;
        overflow:hidden
    }
}
#Q{
    float:left;
    margin:10px
}
#Z{
    display:block;
    width:234px;
    height:60px
}
@media screen and (min-width:319px){
    #Z{
        width:320px;
        height:100px
    }
}
@media screen and (min-width:470px){
    #Z{
        width:300px;
        height:250px
    }
}

我已经使用以下代码配置了视口：

<meta name="viewport" content="width=device-width,initial-scale=1">

这是在桌面浏览器上以各种分辨率测试没有问题的页面，它产生了上面的页面速度洞察问题。

http://new.clubcatcher.com/m/pictures/bloke/2016apr02/1

我的 CSS 中是否有任何可能导致此问题的内容？我能做些什么来解决它？

【问题讨论】：

“但我从来没有为 Q 声明过这样的保证金”，但你做到了：#Q{ float:left; margin:10px}
我认为媒体查询会覆盖它，加上边距意味着总共 20px 间距：左侧 10 像素，右侧 10 像素

标签： javascript html css media-queries viewport

【解决方案1】：

为#Q声明了一个margin，导致了这个问题：

#Q{
    float:left;
    margin:10px
}

将其设置为 margin: auto; 即可。

此外，如果在另一种情况下您将无法修改属性，有两个简单的选项（尽管最好避免使用它们）：

用!important标签设置新属性； e.g. margin: auto !important;
将新属性放入内联样式中（就像您将文本对齐到#Q），它优先于链接的样式表

【讨论】：

【解决方案2】：

移动这个：

#Q{
    float:left;
    margin:10px
}
#Z{
    display:block;
    width:234px;
    height:60px
}

到您的 css 文件的顶部。

你也应该放置这个块

@media screen and (min-width:470px){

在此之前

@media screen and (min-width:319px){

【讨论】：

【解决方案3】：

线索就在名字里。 CSS 代表层叠样式表，因此任何具有相同特性的 CSS 将始终被 CSS 堆栈中的最后一个 CSS 规则覆盖。第一个媒体查询之后的 CSS 中的两个类将适用于所有媒体大小，因为您没有为这两个指定一个，并且由于它们位于第一个之后，因此它们将优先。

【讨论】：

这对我来说似乎很有意义。我做出了改变，它奏效了。