Html 移除按钮上的双轮廓，并将其'；里面有什么文字

我有一个

按钮

，里面有一个文本。我在

：active

和

focus

状态中设置了

大纲

，就像下面的代码片段一样。我在

firefox上有一个奇怪的行为：当我点击
按钮时，
按钮周围有一个
轮廓，按钮内的文本周围有第二个轮廓（见下面的屏幕截图）。我刚在firefox上看到这个奇怪的问题。我怎样才能解决这个问题。我找到的关于我的问题的唯一答案是，使用
outline:none，但这不是我想要的。我想在
按钮周围画一个大纲

chrome
windows10:


firefox上的
大纲
（发布）Windows 10:



。按钮{
背景色：透明；
边框：2件纯蓝；
字体大小：20px；
填充：8px 24px；
文本对齐：居中；
}
.按钮\uuu btn：激活，
.按钮\uuu btn：焦点{
轮廓：1px点黑色；
轮廓偏移量：5px；
}

我是默认按钮
试试这个：

CSS

.button{
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer - Edge */
          user-select: none; /* Chrome and Opera */
}

用户选择属性指定是否可以删除元素的文本
被选中

请使用以下代码：

button::-moz-focus-inner {
   border: 0;
}

它将删除所有按钮的firefox内部轮廓

这里也提到了这个建议：
我试过了，但问题仍然存在。。。我正在使用Windows 10。。。我的一个朋友在Firefox Mac上试过，但他无法重现这个问题，它看起来和chrome上的一样……是的，我几个小时前在互联网上找到了相同的链接。谢谢这似乎也是特定firefox版本的一个bug：我在Windows10上，我的firefox是63.0.3（64位）。我的collegue在具有相同firefox版本的Macbook上有相同的问题，而另一个collegue在不同版本上没有此错误。