css - 为什么 Chrome 会针对出现在错误位置的文本输入字段弹出错误消息？

Question

我在某些输入字段上使用了 HTML5 的“必填”标签。这在 firefox 中效果很好，但出于某种原因在 Chrome 中它会执行以下操作:

是什么导致错误弹出窗口出现在错误的位置？

附言

如果需要，这里是输入字段的 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，您会看到所有内容都包含在宽度设置为 900px 的“#mainContainer”中。当我删除 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>