UI∶ 为啥你这个页面边框1px看起来这么粗？ 点击关注公众号，“技术干货”及时达！背景最近在开发H5，ui稿给的border：1px solid,因为ui稿上的宽度是750px，我们运行的页面宽度是375px，所以我们需要把所以尺寸/2。所以我们可能会想写border：0.5px solid。但是实际上，我们看页面渲染，仍然是渲染1px而不是0.5 示例代码 !DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ style *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:Arial,sans-serif; } .flex{ display:flex; } .item{ margin-right:10px; padding:10px; font-size:13px; line-height:1; background-color:rgba(242,243,245,1); } .active{ color:rgba(250,100,0,1); font-size:14px; border:0.5pxsolid } /style /head body divclass="flex" !--divclass="itemactive" active /div-- divclass="item" item1 /div divclass="item" item2 /div divclass="item" item3 /div /div /body /html 在没active的情况下 他们的内容都是占13px ??在有active的情况下? active占了14px这个是没问题的，因为它font-size是14px嘛，但是我们是设置了border的宽度是0.5px，但展现的却是1px。 ?再来看看item 它内容占了16px，它受到相邻元素影响是14px+2px的上下边框 为啥border是1px呢在 CSS 中，边框可以设置为 0.5px，但在某些情况下，尤其是低分辨率的屏幕上，浏览器可能会将其渲染为 1px 或根本不显示。这是因为某些浏览器和显示设备不支持小于 1px 的边框宽度或不能准确渲染出这样的细小边框。 浏览器渲染机制不同浏览器对于小数像素的处理方式不同。一些浏览器可能会将0.5px边框四舍五入为1px，以确保在所有设备上的一致性。设备像素比在高 DPI（如 Retina 显示器）设备上，0.5px边框可能看起来更清晰，因为这些设备可以渲染更细的边框。在低 DPI 设备上，0.5px边框可能会被放大或者根本不会被显示。解决办法方法一：使用伪类和定位.active{ color:rgba(250,100,0,1); font-size:14px; position:relative; } .active::after{ content:""; pointer-events:none; display:block; position:absolute; left:0; top:0; transform-origin:00; border:1px#ff892esolid; box-sizing:border-box; width:100%; height:100%; } 另外的item的内容高度也是14px了符合要求 方法二：使用阴影，使用F12看的时候感觉还是有些问题.active2{ margin-left:10px; color:rgba(250,100,0,1); font-size:14px; position:relative; box-shadow:0000.5px#ff892e; } 方法三：使用svg，但这种自己设置了宽度。 divclass="active" svgwidth="100%"height="100%"viewBox="00100100"preserveAspectRatio="none" rectx="0"y="0"width="100"height="100"fill="none"stroke="#ff892e"stroke-width="0.5"/rect /svg active /div 方案四：使用svg加定位，也比较麻烦，而且有其他的问题 divclass="active" svgviewBox="00100100"preserveAspectRatio="none" rectx="0"y="0"width="100"height="100"fill="none"stroke="#ff892e"stroke-width="0.5"/rect /svg divclass="content"active/div /div .active{ color:rgba(250,100,0,1); font-size:14px; position:relative; display:inline-block; } .activesvg{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; box-sizing:border-box; } .active.content{ position:relative; z-index:1; } 方法五：使用一个父元素 比较麻烦divclass="border-container" divclass="active"active/div /div .border-container{ display:inline-block; padding:0.5px; background-color:#ff892e; } .active{ color:rgba(250,100,0, font-size:14px; background-color:white; } 最后在公司里，我们使用的都是方案一，这样active和item它们的内容高度都是14px了。然后我们再给他们的父盒子加上 align-items: center。这样active的高度是14px，其他都是13px了。但是active的高度会比其他item的盒子高1px，具体看个人需求是否添加吧。 点击关注公众号，“技术干货”及时达！ 阅读原文