媒体查询不适用于 Firefox，但适用于 Chrome

Question

This media query code works in Chrome but is not working in Firefox Developer.此媒体查询代码适用于 Chrome，但不适用于 Firefox Developer。

But if I open Web Tools in Firefox and add a line break anywhere in the stylesheet then it works.但是，如果我在 Firefox 中打开 Web Tools 并在样式表中的任何位置添加换行符，那么它就可以工作了。

 #Line_98 { fill: transparent; stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .Line_98 { overflow: visible; position: absolute; width: 600px; height: 1px; left: 0px; top: 143.5px; transform: matrix(1,0,0,1,0,0); } #Line_99 { fill: transparent; stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .Line_99 { overflow: visible; position: absolute; width: 600px; height: 1px; left: 0px; top: 195.5px; transform: matrix(1,0,0,1,0,0); } #Show_when_view_less_than_line_ { display: none; left: 46px; top: 161px; position: absolute; overflow: visible; width: 255px; height: 16px; text-align: left; font-family: Helvetica Neue; font-style: normal; font-weight: normal; font-size: 14px; color: rgba(160,160,160,1); letter-spacing: 0.5px; } /** show when less than width */ @media (max-width: 600px) { .Show_when_view_less_than_line_ { display: block !important; } } #Show_when_view_more_than_line_ { display: none; left: 46px; top: 222px; position: absolute; overflow: visible; width: 299px; height: 16px; text-align: left; font-family: Helvetica Neue; font-style: normal; font-weight: normal; font-size: 14px; color: rgba(160,160,160,1); letter-spacing: 0.5px; } /** show when more than width */ @media (min-width: 600px) { .Show_when_view_more_than_line_ { display: block !important; } }

 <div id="Responsive_Parts_VI"> <svg class="Line_98" viewBox="0 0 600 1"> <path id="Line_98" d="M 0 0 L 600 0"> </path> </svg> <svg class="Line_99" viewBox="0 0 600 1"> <path id="Line_99" d="M 0 0 L 600 0"> </path> </svg> <div id="Show_when_view_less_than_line_" class="Show_when_view_less_than_line_"> <span>Show when view less than line width</span> </div> <div id="Show_when_view_more_than_line_" class="Show_when_view_more_than_line_"> <span>Show when view more than line width</span> </div> </div>

I'm going to see if this works in the StackOverflow view.我将看看这是否适用于 StackOverflow 视图。

To test resize the browser in Firefox.在 Firefox 中测试调整浏览器的大小。

Here is the full page code (you can save locally):这是完整的页面代码（您可以保存在本地）：

https://goonlinetools.com/snapshot/code/#9ioj8td2o5o6gjygd7com3 https://goonlinetools.com/snapshot/code/#9ioj8td2o5o6gjygd7com3

Here is the full page code here:这是完整的页面代码：

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Media</title> <style id="applicationStylesheet" type="text/css"> .mediaViewInfo { --web-view-name: Media; --web-view-id: Media; --web-scale-on-resize: true; --web-refresh-for-changes: true; --web-enable-deep-linking: true; } :root { --web-view-ids: Media; } * { margin: 0; padding: 0; box-sizing: border-box; border: none; } #Media { position: absolute; width: 100%; height: 100%; background-color: rgba(255,255,255,1); overflow-x: hidden; overflow-y: auto; --web-view-name: Media; --web-view-id: Media; --web-scale-on-resize: true; --web-refresh-for-changes: true; --web-enable-deep-linking: true; } #Line_99 { fill: transparent; stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .Line_99 { overflow: visible; position: absolute; width: 600px; height: 1px; left: 0px; top: 195.5px; transform: matrix(1,0,0,1,0,0); } #Show_when_view_less_than_line_ { display: none; left: 46px; top: 161px; position: absolute; overflow: visible; width: 255px; height: 16px; text-align: left; font-family: Helvetica Neue; font-style: normal; font-weight: normal; font-size: 14px; color: rgba(160,160,160,1); letter-spacing: 0.5px; } /** show when less than width */ @media (max-width: 600px) { .Show_when_view_less_than_line_ { display: block !important; } } #Show_when_view_more_than_line_ { display: none; left: 46px; top: 222px; position: absolute; overflow: visible; width: 299px; height: 16px; text-align: left; font-family: Helvetica Neue; font-style: normal; font-weight: normal; font-size: 14px; color: rgba(160,160,160,1); letter-spacing: 0.5px; } /** show when more than width */ @media (min-width: 600px) { .Show_when_view_more_than_line_ { display: block !important; } } </style> </head> <body> <div id="Media"> <svg class="Line_99" viewBox="0 0 600 1"> <path id="Line_99" d="M 0 0 L 600 0"> </path> </svg> <div id="Show_when_view_less_than_line_" class="Show_when_view_less_than_line_"> <span>Show when view less than line width</span> </div> <div id="Show_when_view_more_than_line_" class="Show_when_view_more_than_line_"> <span>Show when view more than line width</span> </div> </div> </body> </html>

I'm using Firefox Developer 91.0b2 (64-bit) OSX我使用的是 Firefox Developer 91.0b2（64 位）OSX

UPDATE:更新：
The issue was on some code on my side and not the browser.问题出在我这边的一些代码上，而不是浏览器上。

Answer 1

there is an additional css styling you need to do for firefox您需要为 firefox 做一个额外的 css 样式

 @-moz-document url-prefix() { // put your styles here }

or you can use this或者你可以使用这个

 @media all and (min--moz-device-pixel-ratio:0) and (max-width: 680px){ // put your styles here }

媒体查询不适用于 Firefox，但适用于 Chrome

问题描述

1 个解决方案

解决方案1
0 2021-07-21 18:52:46

媒体查询不适用于 Firefox，但适用于 Chrome

问题描述

1 个解决方案

解决方案1 0 2021-07-21 18:52:46

解决方案1
0 2021-07-21 18:52:46