输入字段建议未在Firefox上正确显示

Question

我正在使用电子邮件输入字段，忘记密码密码。但是在Firefox上却没有正确显示。

我正在使用以下代码

<div class="mainB">
<div class="centerBlock">
<form method="post">
    <div class="alignText">
       Enter Email Address:
        <input type="email" name="userEmail" required="required"
                pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" 
                maxlength="45" id="forgotPassTextField" />
        <br>
        <br>
    </div>
    <div id="alignCenter">
        <button class="btn  mt-15 btn-default  btn-custom" type="submit">
           Ok
        </button>
        <button class="btn  mt-15 btn-default  btn-custom" type="button"
                onclick="">
            Cancel
        </button>
    </div>
</form>

建议显示在页面底部，文本字段位于页面顶部：

我的CSS如下：

.alignText {
    margin-left: 52px;
    text-align: left;
}
#forgotPassTextField {
    width: 252px;
}
#alignCenter {
    text-align: center;
}
.mainB {
    height: 585px;
    position: absolute;
    width: 100%;
}
.centerBlock {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 10px #000000;
    height: 230px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    vertical-align: middle;
    width: 500px;
}

Answer 1

“建议”框的问题（当您键入与此类值的开头相匹配的内容时，显示的框表示某些先前输入的值）是由浏览器控制的。它没有规范，也没有太多公共文档。

在这种情况下，显示该框是因为input元素位于应用了CSS转换的元素（div，类centerBlock）内，即简单的转换在 y 方向。似乎Firefox感到困惑，并认为input元素放置在没有转换的位置。

因此，修复方法是删除transform: translateY(-50%);。为了定位元件，最好将其放置在正确的位置。在这种情况下，它位于相对位置，因此您只需要将top: 50%;替换为top: calc(50% - 115px);。值115px是div元素高度的50％。

IE 8或更早版本不支持calc construct，但transform也不支持。{/ p>