今日在项目中遇到了一个问题——移动端可能会不显示 0.01rem 的边框, 项目的适配方案为 rem, 转换规则是: 1rem = 100px.

问题描述


项目采用的适配方案为 rem, 对应的转换规则为: 1rem = 100px. 但是今日在写项目的时候, 遇到了一个问题, 代码如下:

1
<div id="wrapper"></div>
1
2
3
#wrapper {
border: 0.01rem solid red;
}

上述代码很简单, 一个带有边框的 div. 但是在安卓一些低版本浏览器无法看到边框, iOS 下正常.

解决方案


使用 1px 代替类似 0.01rem 的属性:

1
2
3
#wrapper {
border: 1px solid red;
}