项目中会遇到UI指定边框用0.5像素的,但实际单纯的border:0.5px solid #ddd;在很多移动端设备上会出现显示异常甚至直接消失,这是不同设备对像素处理的问题。像是很多android识别不了0.5像素就会直接不显示。
这里提供一种我用的有效的解决方案:
- 取消按钮的边框,并设置按钮定位 position: relative;
- 为按钮添加 before伪元素,并设置 position: absolute;
- 利用before模拟边框,并且先设置足够能被设备识别的边款,然后进行缩放到想要的边宽
修复效果图
布局
<div class="portfolio_codetype">
<p class="portfolio_code"><span>测试测试测试测试测试</span></p>
<p class="portfolio_type"><span>测试测试测试测试测试</span></p>
<p class="portfolio_type"><span>测试测试测试测试测试测试</span></p>
<p class="portfolio_type"><span>测试测试测试测试测试测试</span></p>
</div>
核心样式CSS
.portfolio_type{
font-size: 11px;
color: #67778B;
letter-spacing: 0;
position: relative;
border-radius: 1px;
padding: 0 4px;
height: 18px;
}
.portfolio_type::before{
content: "";
position: absolute;
border: 4px solid #929EAD;
width: 800%;
height: 800%;
transform-origin: 0 0;
transform: scale(0.125, 0.125);
box-sizing: border-box;
border-radius: 8px;
top: 0;
left: 0;
}