Question

在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>

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

Answer 1

为border

添加input

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

Answer 2

你可以这样做。

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

文本输入边框在表单中被切断

2 个答案: