解决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;
   }
   <!-- 高度在493px和700px中间时 -->
   @media screen and  (min-height: 493px)and (max-height: 700px){

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

   }
}

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