Почему в Chrome всплывают ошибки, когда поля ввода текста появляются не в том месте?

Question

Я использую тег HTML5 'required' в некоторых полях ввода.Это прекрасно работает в Firefox, но по какой-то причине в Chrome он делает следующее:

Что вызывает появление всплывающей ошибки в неправильном месте?

PS

В случае необходимости, вот CSS для полей ввода:

input[type="text"], input[type="password"], input[type="email"] {

height: 25px;
width: 200px;

border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;

border: none;

padding: 4px 8px 0;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, .1)),to(rgba(0, 0, 0, .01)));
background: -moz-linear-gradient(0% 100% 90deg, rgba(0, 0, 0, .01), rgba(0, 0, 0, .1));

box-shadow: 0 1px 0 rgba(255, 255, 255, .87) , inset 0 1px 3px rgba(0, 0, 0, .33), inset 0 0 1px rgba(0, 0, 0, .25);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .87), inset 0 1px 3px rgba(0, 0, 0, .33), inset 0 0 1px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .87), inset 0 1px 3px rgba(0, 0, 0, .33), inset 0 0 1px rgba(0, 0, 0, .25);
-o-box-shadow: 0 1px 0 rgba(255, 255, 255, .87), inset 0 1px 3px rgba(0, 0, 0, .33), inset 0 0 1px rgba(0, 0, 0, .25);

text-align: left;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 15px;
font-weight: normal;
line-height: 1;

text-shadow: 1px 1px 1px white;
color: #3B3B3B;

}

Answer 1

Я нашел обходной путь для этой проблемы, однако я все еще не уверен относительно фактической причины.Глядя на HTML ниже, вы увидите, что все упаковано в "#mainContainer", ширина которого установлена ​​в 900 пикселей.Когда я убрал ширину в CSS, проблема ушла.Чтобы сохранить ширину 900 пикселей и обойти эту проблему, я добавил вторичную оболочку в качестве дочернего элемента "#mainContainer".

        <div id="mainContainer">
        <div id="innerWrap">
        <?php
        include ('header.html');
        ?>
        <form method="post" action="download.php" type="application/x-www-form-urlencoded">
            <h3 style="margin: 15px 0;">Please login to download NPVCalc</h3>
            <table style="margin: 0 auto;">
                <tr>
                    <td><span>Username: </span></td>
                    <td>
                    <input type="text" name="username" required />
                    </td>
                </tr>
                <tr>
                    <td><span>Password: </span></td>
                    <td>
                    <input type="password" name="password" required />
                    </td>
                </tr>
            </table>
            <br/>
            <input type="submit" name="submit" value="Login" />
            <input type="reset" name="reset" value="Reset" />
            <br>
            <br>
            <a href="forgotpass.php" style="font-size:12px">Forgot password?</a>
        </form>
        </div>
        <div class="clearfix"></div>
    </div>