解决firefox(火狐)浏览器使用transform: scale导致的border不显示或显示不全的问题；

最近火狐遇到了此问题，查了许久没有解决办法也有说是因为火狐不支持小于1px单位的，也有说火狐浏览器本身的问题，然后也没有解决方案，最后没办法只能用最笨的方法解决。。。。

• 只针对Firefox使用CSS，使用'@-moz-document url-prefix()' CSS特定扩展来针对Firefox浏览器

  @-moz-document url-prefix() {
  /* Add CSS here /
  / 仅在 Firefox 中应用的样式 */
  div {
  border-width: 2px;
  }
  }

• 由于响应式使用了transform: scale，所以又用了媒体查询单独设置不同宽高下的页面使用的border宽度

  @-moz-document url-prefix() {
  /* Add CSS here /
  / 仅在 Firefox 中应用的样式 */
  div {
  border-width: 2px;
  }
  
  @media screen and (min-height: 493px)and (max-height: 700px){

   }
   <!-- 在宽度小于11024px和高度小于700px时 -->
   @media screen and (max-width: 1024px) and (max-height: 799px) {
  
   }

  }

如果广大网友有什么好办法，可以留言告知下，谢谢