移动端不居中问题/安卓和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;}
相关推荐
gnip6 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫7 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel8 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼9 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手12 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法12 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku13 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode13 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu13 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu13 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript