文本输入边框在表单中被截断答案

【问题标题】：Text input border gets cut off in form文本输入边框在表单中被截断
【发布时间】：2017-10-26 03:53:12
【问题描述】：

在 Chrome（仅限 chrome）中，我有一个奇怪的图形故障，我创建了一个表单：

如您所见，左边框似乎刚刚被切断。下面我有代码：

body {
    text-align: center;
}

td {
    vertical-align: middle;
    padding: 2px;
}

#login-table td:nth-child(1) {
    text-align: right;
}

#login-table input {
    padding: 2px;
}

#login-table {
    margin-bottom: 14px;
}

#login {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.required {
    font-weight: bold;
}

<html>
    <head>
        <title>Register</title>
        <link rel="stylesheet" href="styles.css" type="text/css" />
    </head>
    <body>
        <div id="login">
            <h2>Administrator Registration</h2>
            <form method="POST">
                <table id="login-table">
                    <tr>
                        <td class="required">Username:</td>
                        <td><input type="text" name="username" required/></td>
                    </tr>
                    <tr>
                        <td class="required">Email:</td>
                        <td><input type="text" name="email" required/></td>
                    </tr>
                    <tr>
                        <td class="required">Password:</td>
                        <td><input type="password" name="password" required/></td>
                    </tr>
                    <tr>
                        <td class="required">Confirm Password:</td>
                        <td><input type="password" name="confirm" required/></td>
                    </tr> 
                    <tr>
                        <td>First Name:</td>
                        <td><input type="text" name="first-name"/></td>
                    </tr>
                    <tr>
                        <td>Last Name:</td>
                        <td><input type="text" name="last-name"/></td>
                    </tr>
                </table>
                <input type="submit" value="Register"/>
            </form>
        </div> 
    </body>
</html>

我已经尝试了很多相关问题的解决方案，但我找不到任何可以解决此问题的方法。请帮忙！谢谢！

【问题讨论】：

Funny... 在我的电脑上用 Chrome 试了一下，效果很好；你确定确实有问题吗？

标签： html css forms html-table

【解决方案1】：

为input添加border

#login-table input {
    border: 1px solid #f00;
    padding: 2px;
}

【讨论】：

【解决方案2】：

你可以这样做。

#login-table input {
  padding: 2px;
  border-width: 1px;
  border-style: solid;
}

【讨论】：