文本輸入邊界獲取形式切斷

在瀏覽器（和只有鉻），我有我有我已經創建了一個表格此奇圖形毛刺：文本輸入邊界獲取形式切斷

作爲你可以看到，看起來左邊界正在被切斷。下面我的代碼：

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>

我已經嘗試了很多相關問題的解決方案，但我找不到任何使這一問題消失。請幫忙！謝謝！

來源

2017-05-25 Thezperk

有趣......在我的電腦上用Chrome試過了，它運行得非常完美;你確定有問題嗎？ –

可以這樣做。

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

來源

2017-05-25 13:39:19 LXhelili

添加border爲input

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

來源

2017-05-25 13:13:55

文本輸入邊界獲取形式切斷

回答

相關問題