为什么 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”中，其宽度设置为 900px。当我删除 CSS 中的宽度时，问题就消失了。为了保持 900px 宽度并解决该问题，我添加了一个辅助包装器作为“#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>