Html firefox上未正确显示输入字段提示

我正在使用电子邮件输入字段，用于忘记密码。但在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转换的元素（类为

中心块的
div
）内部，即y方向的简单转换。Firefox似乎感到困惑，认为
input
元素被放置在一个没有转换的位置

因此，修复方法是删除
transform:translateY（-50%）。要定位元素，最好将其放置在正确的位置，否则会发生错误。在这种情况下，它是相对定位的，所以您只需要替换
top:50%通过
顶部：计算（50%-115px）。值
115px
是
div
元素高度的50%

IE 8或更早版本不支持，但两者都不支持。
我认为问题在于Firefox和chrome的分辨率不同，您可以共享css吗also@himanshu我已经添加了我的css，只为文本字段和按钮提供。
不是HTML。如果这是问题的关键，请描述如何解决并相应地标记问题。如果没有，请将其删除或替换为合适的实际内容和HTML代码。@JukkaK.Korpela这是一个只用于标记的jsp标记，我现在已经删除了。.您能告诉我为什么只在firefox上发生这种情况吗？看起来是有额外的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;
}