移动端不居中问题/安卓和ios下line-height上下居中 css兼容问题

移动端开发过程,经常会写带0.5px边框角标类的样式,直接使用border设置0.5px边框,ios有些机型会出现显示不完整的情况。所以改用伪元素方法实现边框。代码如下:

复制代码
.comment-entry::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border: 0.01rem solid #999;  
    transform-origin: 0 0;
    transform: scale(0.5);
    border-radius: 0.4rem;
    box-sizing: border-box;
}

边框问题解决后,又发现安卓系统,文字无法居中。总结了一下几个解决方法:

1、如果只有单个角标,字号内外边距等设置为需求大小的2倍,使用transform进行缩放。

复制代码
transform: scale(0.5);
transform-origin: left center;

2、不直接设置line-height=height,而是设置

复制代码
line-height:normal; 
padding:10px 0;

3、使用table布局,但是三星S8存在兼容性问题,其它机型正常。

复制代码
<div class='test'>
    <span>测试</span>
</div>
 
.test{display:table}
.test span{background:pink;font-size:11px;display:table-cell;vertical-align:middle;}
相关推荐
书源2 分钟前
灵活性和可维护性,被严重低估的编程原则
前端·javascript·vue.js
前端啵啵猪8 分钟前
useCallback 和 useMemo,什么时候用才是有效的?
前端·react.js
星哥说事18 分钟前
跨平台开源笔记神器,用DeepSeek写笔记 , 效率翻倍
前端
喜欢你,还有大家1 小时前
FTP文件传输服务
linux·运维·服务器·前端
该用户已不存在1 小时前
你没有听说过的7个Windows开发必备工具
前端·windows·后端
Bi1 小时前
Dokploy安装和部署项目流程
运维·前端
普通网友1 小时前
前端安全攻防:XSS, CSRF 等防范与检测
前端·安全·xss
携欢1 小时前
PortSwigger靶场之Reflected XSS into attribute with angle brackets HTML-encoded通关秘籍
前端·xss
小爱同学_1 小时前
React知识:useState和useRef的使用
前端·react.js