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

Question

此媒体查询代码适用于 Chrome，但不适用于 Firefox Developer。

但是，如果我在 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>

我将看看这是否适用于 StackOverflow 视图。

在 Firefox 中测试调整浏览器的大小。

这是完整的页面代码（您可以保存在本地）：

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

这是完整的页面代码：

 <!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>

我使用的是 Firefox Developer 91.0b2（64 位）OSX

更新：
问题出在我这边的一些代码上，而不是浏览器上。

Answer 1

您需要为 firefox 做一个额外的 css 样式

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

或者你可以使用这个

 @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