【发布时间】：2021-09-29 03:29:13
【问题描述】：
此媒体查询代码在 Chrome 中有效，但在 Firefox Developer 中无效。
但如果我在 Firefox 中打开 Web 工具并在样式表的任意位置添加换行符，那么它就可以工作。
#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
更新：
问题出在我这边的一些代码上，而不是浏览器上。
【问题讨论】：
-
我在 Edge、Firefox 和 Chrome 上尝试了您的 sn-p，并且在所有三个浏览器中都复制了相同的操作
-
@BeerusDev 谢谢。我将发布页面代码。我也可以在线使用，但不能通过文件协议在本地使用。
-
@BeerusDev 我已经发布了完整的页面代码
-
@BeerusDev 是我页面上的一些 JavaScript 代码导致了这个问题。它可以在另一个浏览器中工作的原因是因为 JS 在那个浏览器中被禁用了。
-
@BeerusDev 错误出现在我的代码中。它在一个浏览器而不是另一个浏览器中工作的原因是在其中一个浏览器上启用了 javascript。
标签： html css firefox media-queries