手机 chrome 上的键盘与 CSS 混淆

Question

我发现我在 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;
}

感谢任何提示！

Answer 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;
}

Answer 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;
}

手机 chrome 上的键盘与 CSS 混淆

Keyboard on mobile chrome messes with the CSS

html

css

mobile

google-chrome

responsive-design