Question

使用相同的HTML / CSS3标记，桌面会在容器的中间正确地渲染伪元素，而移动版Android 7.0 Chrome（版本69.0.xxx）则以不同的方式对齐元素（=错误）。有什么想法如何以相同的方式呈现它们而不求助于骇客吗？

我现在有userAgent hack来检查“ Android”字符串，并添加了额外的类，该类会稍微改变x标记的顶部位置。在两种情况下，字体均为“ -apple-system，BlinkMacSystemFont，“ Segoe UI”，Roboto，“ Helvetica”。标头带有<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

桌面版与移动版Chrome呈现方式不同:: ::内容后

0 个答案: