寬度為100％的CSS元素落在視口之外

Question

我這里有代碼，根據用戶的屏幕大小確定要使用的廣告的大小。 我也這樣做，如果屏幕太小，廣告會以自動邊距為中心。

當我使用google page-speed見解運行頁面時，我收到以下消息：

頁面內容寬度為421 CSS像素，但視口寬度僅為411 CSS像素。 以下元素位於視口之外：

元素Advertisement落在視口之外。

這告訴我，元素Q在元素的左側和右側都有10px的邊距，但我從未向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中有什么可能導致此問題嗎？ 我該怎么辦才能修復它？

Answer 1

移動這個：

#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){

Answer 2

線索就在名字中。 CSS代表層疊樣式表，因此任何具有相同特異性的CSS將始終被CSS堆棧中的最后一個CSS規則覆蓋。 在第一次媒體查詢之后，CSS中的兩個類將適用於所有媒體大小，因為您沒有為這兩個類指定一個類，並且由於它們位於第一個之后，因此它們將優先。

Answer 3

為#Q聲明了一個保證金，導致此問題：

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

設置為margin: auto; 它會起作用。

此外，如果在另一種情況下你將無法修改屬性，有兩個簡單的選項（盡管最好避免它們）：

• 使用!important標記設置新屬性; eg margin: auto !important;
• 將新屬性放在內聯樣式中（就像將文本對齊到#Q一樣），該屬性優先於鏈接樣式表