困扰很久的问题,还是偶尔出现的。在项目中设置了一个弹框,点击显示 关闭隐藏。弹框中的输入框 选择项比较多,造成需要用到上下滚动的滚动条,但是滚动条一向下滚动,内部的文字等就变得模糊。

今天解决了 记录一下。

原因:

  • 设置弹框的盒模型的css:
.pro_infor_msg_box {
    position: fixed;
    z-index: 1003;
    width: 998px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
  • 设置的弹框里的盒模型的css:
.message_box_cont {
    max-height: calc(100vh - 159px);
    overflow-y: scroll;
    border: 3px solid transparent;
    background: #fff;
    padding: 20px;
    border-radius: 0 0 8px 8px;
}

解决:

比如盒子的宽度设置为400px,高度601.5px,这样transform计算出的50%是200px和300.75px,这种情况就会出现了字体模糊的现象,查阅资料后发现translate为百分比计算出为小数的时候会出现字体模糊现象。

故而最后将盒模型的高度改为偶数,因为我用的calc动态设置,将减去的高度减1就不在模糊了

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐