html - 游标与iOS(Webkit)上的输入未对齐

我的移动网站上有一个表格，您单击“预定会议”后便会打开。
表单的代码很简单：（下面列出）。一切都按预期工作，但是当我使用移动Safari并使用自动填充联系人功能时，它将nextButton的可单击区域完全移到上方，并与背景分开。这里有什么线索吗？

function meetingSchedulerStepNameVerify()
{
    if(document.getElementById('meetingSchedulerInputFirstName').value != '' && document.getElementById('meetingSchedulerInputLastName').value != '')
    {
        document.getElementById('meetingSchedulerStepNameNextButton').style.backgroundColor = '#5efb7c';
        return true;
    }

}
function meetingSchedulerStepNameNextButtonPressed()
{
    if(document.getElementById('meetingSchedulerInputFirstName').value != '' && document.getElementById('meetingSchedulerInputLastName').value != '')if (document.getElementById('meetingSchedulerStepNameNextButton').style.backgroundColor == 'rgb(94, 251, 124)')
    {
        alert('yes');
        document.getElementById('meetingSchedulerStepName').style.display = 'none';
        document.getElementById('meetingSchedulerStepAddress').style.display = 'block';
        document.getElementById('meetingSchedulerStepAddressPromptName').innerHTML = document.getElementById('meetingSchedulerInputFirstName').value;
    }
    else
    {
        alert(document.getElementById('meetingSchedulerStepNameNextButton').style.backgroundColor);
    }
}

#meetingSchedulerStepAddress
            {
                display:none;
                width:100%;
                text-align:center;
            }
                #meetingSchedulerStepAddressPrompt
                {
                    width:100%;
                    font-size:4.5em;
                    font-family:Roboto;
                    padding-top:.5em;
                    padding-bottom:.5em;
                    background-color:#ffbd4b;
                    border-radius:2vw;
                    -webkit-border-radius:2vw;
                    -moz-border-radius:2vw;
                }
                #meetingSchedulerStepAddressInputWrapper
                {
                    margin-top:5em;
                }
                .meetingSchedulerStepAddressLine
                {
                    display:flex;
                    width:100%;
                }
                    #meetingSchedulerStepAddressInputLine1
                    {
                        width:100%;
                    }

                    #meetingSchedulerStepAddressInputCity
                    {
                        width:100%;
                    }
                    #meetingSchedulerStepAddressInputState
                    {
                        width:50%;
                    }
                    #meetingSchedulerStepAddressInputZipcode
                    {
                        width:50%;
                    }
                .meetingSchedulerStepAddressInput
                {
                    font-size:4em;
                    font-family:Roboto;
                    text-align:center;
                    border:0;
                    -webkit-appearance: none;
                }
                #meetingSchedulerStepAddressTransitionWrapper
                {
                    margin:0 auto;
                    margin-top:10em;
                    width:50em;
                    height:10em;
                }
                    #meetingSchedulerStepAddressBackButton
                    {
                        height:10em;
                        width:15em;
                        background-color:red;
                        float:left;
                        background-image:url(../../../images/home/mobile/meetingSchedulerBackButton.png);
                        background-position:center;
                        background-size:6em 6em;
                        background-repeat:no-repeat;
                        border-radius:3vw;
                        -webkit-border-radius:3vw;
                        -moz-border-radius:3vw;

                    }
                    #meetingSchedulerStepAddressNextButton
                    {
                        width:30em;
                        height:10em;
                        background-color:lightgray;
                        float:right;
                        border-radius:3vw;
                        -webkit-border-radius:3vw;
                        -moz-border-radius:3vw;
                    }
                        #meetingSchedulerStepAddressNextButtonText
                        {
                            font-family:Roboto;
                            font-size:6em;
                            padding-top:.1em;
                        }

<div id="meetingSchedulerStepAddressInputWrapper">
                        <div class="meetingSchedulerStepAddressLine">
                            <input id="meetingSchedulerStepAddressInputLine1" class="meetingSchedulerStepAddressInput" name="address-line1" placeholder="555 Street Name"/>
                        </div>
                        <div class="meetingSchedulerStepAddressLine">
                        <input id="meetingSchedulerStepAddressInputCity" class="meetingSchedulerStepAddressInput" name="address-level2" placeholder="City"/>
                        </div>
                        <div class="meetingSchedulerStepAddressLine">
                            <input id="meetingSchedulerStepAddressInputState" class="meetingSchedulerStepAddressInput" name="address-level1" value="NJ" placeholder="ST"/>
                            <input id="meetingSchedulerStepAddressInputZipcode" class="meetingSchedulerStepAddressInput" name="postal-code" type="number" value="08008" placeholder="Zipcode"/>
                        </div>
                    </div>
                    <div id="meetingSchedulerStepAddressTransitionWrapper">
                        <div id="meetingSchedulerStepAddressBackButton"></div>
                        <div id="meetingSchedulerStepAddressNextButton"><div id="meetingSchedulerStepAddressNextButtonText">next</div></div>
                    </div>

最佳答案

我不确定导致此错误的原因，但我通过调用document.getElementById('meetingSchedulerStepNameNextButton').scrollIntoView();缓解了症状，从而解决了问题。

关于html - 游标与iOS(Webkit)上的输入未对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42331956/