时间戳

首页 > 解决方案 > 桌面与移动 Chrome 呈现不同::内容后

html - 桌面与移动 Chrome 呈现不同::内容后

问题描述

使用相同的 HTML/CSS3 标记，桌面会在容器中间正确呈现伪元素，而移动 Android 7.0 Chrome（相同版本 69.0.xxx）呈现元素对齐方式不同（=错误）。任何想法如何在不诉诸黑客的情况下以相同的方式呈现它们？

我现在有 userAgent hack 来检查“Android”字符串，并添加了额外的类来稍微改变 x 标记的顶部位置。在这两种情况下，字体都是“-apple-system、BlinkMacSystemFont、“Segoe UI”、Roboto、“Helvetica”。Head-tag 有<meta name="viewport" content="width=device-width, initial-scale=1.0">

代码：

.input-container {
    display: flex;
    justify-content: center;
}

.clear-button {
    display: block;
    position: relative;
}

.clear-button:after {
        position: absolute;
        content: "\02DF";
        font-size: 80px;
        line-height: 80px;
        height: 53.33333px;
        top: 50%;
        transform: translateY(-50%);
    }
<div class="input-container">
  <div class="clear-button"></div>
</div>

桌面图像： desktop_render

手机图片： mobile_android_render

标签： htmlcsssass

解决方案

推荐阅读