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

最新推荐文章于 2024-02-01 17:18:16 发布

皮卡丘-杰尼龟

最新推荐文章于 2024-02-01 17:18:16 发布

阅读量1.4k

点赞数 9

文章标签： firefox 前端

本文链接：https://blog.csdn.net/weixin_46328739/article/details/134878157

版权

本文介绍了如何在Firefox浏览器中使用`@-moz-documenturl-prefix()`特定扩展来处理小于1px的CSS单位问题，同时结合媒体查询处理响应式设计中的边框宽度。作者寻求更好的解决方案，欢迎网友分享.

摘要由CSDN通过智能技术生成

在这里插入图片描述

最近火狐遇到了此问题，查了许久没有解决办法也有说是因为火狐不支持小于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) {

   }
}

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