最大寬度767px媒體查詢 - 風格只渲染在766px或更低（僅受Firefox影響）

我已經解決了一半這個問題，但沒有完全理解問題，這讓我很擔心。我想知道是否有人能夠幫助我理解發揮的作用？最大寬度767px媒體查詢 - 風格只渲染在766px或更低（僅受Firefox影響）

我有一個通過CSS設置爲100％寬度的iframe。容器div是767px。因此iframe也是如此。

我在iframe的樣式表以下媒體查詢：

@media (max-width: 767px) { 
 
    body { 
 
     background: red; 
 
    } 
 
}

在所有流行的瀏覽器測試除Firefox以外，媒體查詢生效，套在身上背景爲紅色。在Firefox中，媒體查詢僅在iframe設置爲766px - 1px以下時生效，即使最大寬度應該「達到幷包括」。這看起來像一個錯誤。我現在的解決方法是將iframe寬度設置爲766.7px（減去.3像素）。這似乎在Firefox中工作（減去0.2沒有工作）。

我的問題 - 這裏發生了什麼？難道這實際上是Firefox中的一個錯誤？我知道我的iframe實現有點不規律，但我認爲根本原因可能與啓發我解決方案的這個問題有關：Media query lost in Firefox when window resized to max-width minus scrollbar width

來源

2015-02-11 Sebastian Webb

嗯有趣！你是否試圖找到這樣的bug是否已經在bugzilla中存在？ – 2015-02-11 09:59:39

我沒有意識到bugzilla，但我已經提交了一個錯誤報告。我會在這裏回覆我收到的任何額外信息。非常感謝您的回覆！ – 2015-02-12 10:12:32

現在FF和Chrome對我來說也有相同的錯誤。我現在用'max-width：767.8px'固定了它，'767px'的樣式適用於這個寬度。 – gdfgdfg 2017-08-20 19:04:37

FWIW，Chrome上的相同行爲是由於...設置了選項卡的瀏覽器縮放設置到125％，而不是100％

我相信這拋出了手機模擬iframe的計算，其中應該已經在767px的閾值以下。

我在花費了一個小時的時間區分了所有的信息源，然後才注意到> _>

來源

2016-04-19 10:11:36 mstrange

最大寬度767px媒體查詢 - 風格只渲染在766px或更低（僅受Firefox影​​響）

回答

相關問題

最大寬度767px媒體查詢 - 風格只渲染在766px或更低（僅受Firefox影響）