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

yanjun821126

已于 2024-04-19 18:27:37 修改

阅读量683

点赞数 3

CC 4.0 BY-SA版权

文章标签： css 前端

于 2024-04-19 18:26:52 首次发布

本文链接：https://blog.csdn.net/yanjun821126/article/details/137973755

本文讲述了在移动端开发过程中遇到的0.5px边框在iOS和Android系统的显示问题，通过伪元素和CSS技巧解决了边框不完整及安卓文字居中难题，包括单个角标的缩放处理、line-height调整和table布局的应用，但提到了三星S8的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端开发过程，经常会写带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;}