Question

所以我使用html和css创建了一个注册表，它工作正常，但是在使用Microsoft Edge进行检查时，我在血型部分的下拉菜单中遇到了一些问题。

因此，如果我在Chrome浏览器上运行它，则可以正常工作，但是，当我尝试在Microsoft Edge或IE 8上运行它时，在下拉列表的开始和结束处会显示一些白条。

我在下面的代码段中同时附上了HTML代码和CSS代码：

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #34495e;
  }
  .box{
    width: 300px;
    padding: 40px;
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%,-40%);
    background: #191919;
    text-align: center;
  }
  .box h1{
    color: white;
    text-transform: uppercase;
    font-weight: 500;
  }
  
  select > option{
    background: #191919;
    color: white;
  }
  
  .box textarea{
    height: 75px;
  }
  
  .box label[for="Male"],
  .box label[for="Male"] + input,
  .box label[for="Female"],
  .box label[for="Female"] + input,
  .box label[for="Other"],
  .box label[for="Other"] + input,
  .box input[type = "radio"] {
    display: inline;
    clear: none;
    width: auto;
  }
  
  
  .box input[type = "text"],.box input[type = "password"], .box select, .box input[type = "tel"], .box textarea, .box fieldset,
  .box input[type = "radio"], .box input[type = "email"]{
    border:0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #3498db;
    padding: 14px 10px;
    width: 200px;
    outline: none;
    color: white;
    border-radius: 24px;
    transition: 0.25s;
  }
  .box input[type = "text"]:focus,.box input[type = "password"]:focus,.box select:focus, .box input[type = "tel"]:focus,
   .box textarea:focus, .box input[type = "email"]:focus{
    width: 280px;
    border-color: #2ecc71;
  }
  .box input[type = "submit"]{
    border:0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #2ecc71;
    padding: 14px 40px;
    outline: none;
    color: white;
    border-radius: 24px;
    transition: 0.25s;
    cursor: pointer;
  }
  .box input[type = "submit"]:hover{
    background: #2ecc71;
  }
  
  .box input[type="radio"] {
    display: inline;
    width: auto;
  }
  
  fieldset label {
    margin-right: 5px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css">

</head>
<body>  
  
<form class="box" method="POST"  action="test.html">

  <h1>Student Registration</h1>
    <!-- First Name -->
  <input type="text" name="Fname" placeholder="First Name" required>
    <!-- Middle Name -->
  <input type="text" name="Mname" placeholder="Middle Name" required>
    <!-- Last Name -->
  <input type="text" name="Lname" placeholder="Last Name" required>
    <!-- Moblie Number -->
  <input type="tel" name="Mnumber" placeholder="Mobile Number" pattern="[0-9]{10}" required>
    <!-- Parent's Number -->
  <input type="tel" name="Pnumber" placeholder="Parents Number" pattern="[0-9]{10}" required>
    <!-- Address -->
  <textarea name="Address" placeholder="Address" maxlength="500" required></textarea>
    <!-- City -->
  <input type="text" name="City" placeholder="City" required>
    <!-- Branch -->
  <select required id="Branch" name="Branch">
    <option value="" selected="selected">Branch</option>
    <option value="AutoMobile" >AutoMobile</option>
    <option value="Civil" >Civil</option>
    <option value="Computer" >Computer</option>
    <option value="Electrical" >Electrical</option>
    <option value="Mechanical" >Mechanical</option>
    </select>
    <!-- Enrollment Number -->
  <input type="tel" name="Enroll" placeholder="Enrollment Number" pattern="[0-9]{12}" required>
    <!-- Gender -->
  <fieldset>
        <legend>Gender</legend>
         <label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
         <label for="Female"><input type="radio" name="Gender"  value="Female"> Female</label>
        <label for="Other"><input type="radio" name="Gender"  value="Other"> Other </label>
        </fieldset>
        <!--E-mail Address -->
        <input type="email" name="email" placeholder="E-mail Address" required>
        <!-- Password -->
        <input type="password" name="pass" placeholder="Password" required>
        <!--Blood Group -->
  <select id="Blood Group" name="Blood Group">
    <option value="" selected="selected">Blood Group</option>
    <option value="A+" >A+</option>
    <option value="B+l" >B+</option>
    <option value="AB+" >AB+</option>
    <option value="O+" >O+</option>
    <option value="A-" >A-</option>
    <option value="B-" >B-</option>
    <option value="AB-" >AB-</option>
    <option value="O-" >O-</option>
    </select>
    <!--Submit Button -->
  <input type="submit" name="" value="Submit">

</form>
</body>
</html>

我们将不胜感激。

Answer 1

.box select中的padding属性设置导致IE / Edge中的结果。经过测试，发现单独定义.box select的样式可能是一种选择。 CSS的相关部分。

class SuperView: UIView {
    override func updateConstraints() {
        super.updateConstraints()
        print("SuperView : updateConstraints")
    }

    override func setNeedsLayout() {
        super.setNeedsLayout()
        print("SuperView : setNeedsLayout")
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        print("SuperView : layoutSubviews")
    }

    override func draw(_ rect: CGRect) {
        super.draw(rect)
        print("SuperView : draw")
    }
}

class SubView: UIView {
    override func updateConstraints() {
        super.updateConstraints()
        print("SubView : updateConstraints")
    }

    override func setNeedsLayout() {
        super.setNeedsLayout()
        print("SubView : setNeedsLayout")
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        print("SubView : layoutSubviews")
    }

    override func draw(_ rect: CGRect) {
        super.draw(rect)
        print("SubView : draw")
    }
}

在Microsoft Edge中签入时下拉菜单出现问题

1 个答案: