Html 为什么当我在Firefox中点击css网格区域时，整个网站会突出显示？

这只发生在Firefox（和TOR）中

这是我的代码：

#主{
显示：网格；
栅隙：8px；
证明内容：中心；
保证金上限：0.25雷姆；
}
.盒子，
.空盒子{
背景色：rgba（255、255、255、0.2）；
边框：1px实心#DDDDDD；
边界半径：12px 12px 12px 12px；
显示器：-moz盒；
浮动：左；
光标：指针；
}
.box_链接{
文字装饰：下划线；
字号：1em；
颜色：#000000；
保证金：自动；
}
@介质（最大宽度：379px）{
.盒子{
字体大小：22px；
宽度：100%！重要；
填充：10px 0px 90px 0px；
显示：网格；
网格间距：4px；
网格模板区域：“it”；
保证金：0px 2px 0px 2px；
}
.box_链接{
文本对齐：右对齐；
右边距：14px；
}
.box_内{
左边距：8px；
}
}
@媒体屏幕和屏幕（最小宽度：380px）{
#主要{
网格行间距：38px；
网格模板列：重复（3114px）；
}
.盒子{
显示：网格；
网格间距：4px；
网格模板区域：“i”“t”；
文本对齐：居中；
高度：114px！重要；
宽度：114px！重要；
填充顶部：6px；
左侧填充：6px；
}
.box_inner，
.box_内部img{
高度：100px！重要；
宽度：100px！重要；
}
.box:悬停，
.空_框：悬停{
-网络工具包盒阴影：0px 0px 12px 3px#A1D6FF；
-moz盒阴影：0px 0px 12px 3px#A1D6FF；
盒影：0px 0px 12px 3px#A1D6FF；
}
}
@媒体屏幕和屏幕（最小宽度：498px）{
#主要{
网格模板列：重复（414px）；
}
}
@媒体屏幕和屏幕（最小宽度：624px）{
#主要{
网格模板列：重复（5114px）；
}
}
@媒体屏幕和屏幕（最小宽度：746px）{
#主要{
网格模板列：重复（6114px）；
}
}
@媒体屏幕和屏幕（最小宽度：868px）{
#主要{
网格模板列：重复（7114px）；
}
}
@媒体屏幕和屏幕（最小宽度：980px）{
#主要{
网格模板列：重复（8114px）；
}
}
@媒体屏幕和屏幕（最小宽度：1280px）{
#主要{
栅柱间隙：12px；
}
}
@媒体屏幕和屏幕（最小宽度：1680px）{
#主要{
网格模板列：重复（8133px）；
栅柱间隙：18px；
}
.盒子{
高度：133px！重要；
宽度：133px！重要；
}
.box_inner，
.box_内部img{
高度：118px！重要；
宽度：118px！重要；
}
}

当使用CSS3技术（如网格和Flexbox）时，实际上不需要使用浮动。这些新布局系统背后的想法是提供一种比浮动更好的方法。因此，您可以删除已应用于网格布局的

float:left

。这也恰好解决了Firefox的突出显示问题。

我不明白为什么要将float与flexbox一起使用。删除它，它就会工作

要回答您的问题，如果您不介意用户无法突出显示内容，您可以使用以下css：

#main {
    display: grid;
    grid-gap: 8px;
    justify-content: center;
    margin-top: 0.25rem;
   -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

---

如果愿意，您可以在Firefox上使用此规则。

这似乎与浮动框有关。我的意图是用网格取代浮动技术（因为我试图使我的站点（更）响应）。我好像忘了删除那个片段。但我也没想到Mozilla Firefox会因此而突出显示我的整个页面，而不是忽略多余的代码。谢谢：）