移动 chrome 上的键盘与 CSS 混淆答案

【问题标题】：Keyboard on mobile chrome messes with the CSS移动 chrome 上的键盘与 CSS 混淆
【发布时间】：2020-12-08 19:15:06
【问题描述】：

我发现我在www.tiny.cc/cloudservice 的项目在使用移动版Chrome 时在登录页面出现了一个问题。键盘出现的那一刻，按钮文本行为不正常：

你知道如何通过 CSS 改变它吗？目前它看起来像这样：

.buttonMain {
    width: 60%;
    height: 50%;
    margin-top: 2%;
    padding: 3% 0% 3% 0%;
    border-radius: 40px 40px 40px 40px;
    font-family: $fontMain;
    background-color: $buttonColor;
    font-size: 2em;
    font-weight: bold;
}

感谢任何提示！

【问题讨论】：

标签： html css google-chrome mobile responsive-design

【解决方案1】：

更改此 CSS，删除 Height

.buttonMain {
    /*height: 50%;*/ /*Remove This*/
    margin: 2% 0; /*Edit this*/
    padding: 3% 0;
    border-radius: 40px 40px 40px 40px;
    background-color: #d3dbfe;
    font-size: 2em;
}

【讨论】：

非常感谢！ :)

【解决方案2】：

如果您添加我已标记的这些规则，您的按钮上的文本将始终完美定位：

.buttonMain {
    display: flex; /*add this it*/
    justify-content: center; /*add this it*/
    align-items: center; /*add this it*/
    height: 50%;
    margin-top: 2%;
    padding: 3% 0;
    border-radius: 40px 40px 40px 40px;
    background-color: #d3dbfe;
    font-size: 2em;
}

【讨论】：

感谢您的帮助！