在没有说明的情况下，在 MS-Edge 上将 HTML 表单字段标签设置为 100% 宽度？

【问题标题】：HTML form field labels being set to 100% width on MS-Edge without instruction?在没有说明的情况下，在 MS-Edge 上将 HTML 表单字段标签设置为 100% 宽度？
【发布时间】：2017-10-07 20:59:57
【问题描述】：

所以我一直在处理我正在处理的项目中的表单 - 并且发现在 Microsoft Edge 上，我的表单字段标签的顶部边框消失了（我假设标签被设置为width: 100%; 并掩盖它）到目前为止，我无法在任何其他浏览器中重新创建它或找出正在执行此操作的 CSS 在哪里。

下面是代码 sn-p 和 CodePen 的链接（因此您可以在 Edge 上全屏查看）。

图片：Form input comparison: Chrome Vs. Edge

代码笔：https://codepen.io/B-Lovegrove/pen/NadBVe

注意：为获得最佳效果，请在代码 sn-p 上使用全屏

html {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    height: 100%;
    background: #363740 url("../media/bg.jpg") repeat scroll;
}

body {
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    width: 100%;
}

a {
    color: #4b8ddb;
    text-decoration: none;
}

table.top_pattern {
    width: 100%;
    border-collapse: collapse;
}

table.top_pattern tbody tr td {
    display: table-cell;
    padding: 0;
    width: 14%;
    height: 5px;
}

table.top_pattern tbody tr td.tc_1 {
    background: #7c8bc5;
}

table.top_pattern tbody tr td.tc_2 {
    background: #799c0c;
}

table.top_pattern tbody tr td.tc_3 {
    background: #2e4795;
}

.radio {
    margin: 0.5rem;
}

.radio label {
    font-size: 1.2em;
}

.radio input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.radio input[type="radio"]+.radio-label:before {
    position: relative;
    display: inline-block;
    margin-right: .8em;
    width: 1em;
    height: 1em;
    border: 1px solid #415086;
    border-radius: 100%;
    background: white;
    content: '';
    vertical-align: top;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
}

.radio input[type="radio"]:checked+.radio-label:before {
    background-color: #4b8ddb;
    -webkit-box-shadow: inset 0 0 0 4px white;
    box-shadow: inset 0 0 0 4px white;
    font-size: 1.2em;
}

.radio input[type="radio"]:focus+.radio-label:before {
    outline: none;
    border-color: #4b8ddb;
}

.radio input[type="radio"]+.radio-label:empty:before {
    margin-right: 0;
}
.Important {
    padding: 10px;
    border-bottom: solid 1px black;
    background: rgba(139, 168, 46, 0.81);
    text-align: center;
    font-size: 1.2em;
    font-family: "Lato", sans-serif;
}

h1.Important {
    margin-top: 0em;
    margin-bottom: 0;
    border-top: solid 1px black;
    background: rgba(209, 209, 209, 0.7);
    font-weight: 500;
    font-size: 2.1em;
    font-family: "Roboto", sans-serif;
}

p,
ul {
    color: white;
    font-size: 1.3em;
    font-family: "Tahoma", sans-serif;
    line-height: 1.3em;
}

ul {
    margin: 1em 0;
}

h2 {
    color: white;
    font-size: 1.4em;
    font-family: "Roboto", sans-serif;
}

.Container {
    padding-bottom: 2.8em;
}

.Container .Content {
    margin: 1.7em 3em 0em 3em;
    padding: 1.5em;
    border: 1px solid #45464f;
    background: #363740;
}

.StaticForm {
    padding: 2em 1em 1em 1em;
    min-height: 70px;
    width: calc(100% - 32px);
    border: 1px solid #45464f;
    background: #2f3038;
    font-family: "Century Gothic", sans-serif;
}

.StaticForm ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.StaticForm .FormField {
    display: block;
    margin-bottom: 30px;
    padding: 9px;
    border: 1px solid #45464f;
}

.StaticForm .FormField:last-child {
    margin-bottom: 0px;
    border: none;
    text-align: center;
}

.StaticForm .FormField>label:first-child {
    display: block;
    overflow: hidden;
    margin-top: -28px;
    padding: 5px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    background: #2f3038;
    color: #4b8ddb;
    font-size: 1.4em;
    font-family: "Lato", sans-serif;
}

.StaticForm .FormField input::-webkit-input-placeholder {
    border: none;
    background: #2f3038;
    color: #adadad;
    font-weight: lighter;
    font-family: "Roboto", sans-serif;
}

.StaticForm .FormField input:-ms-input-placeholder {
    border: none;
    background: #2f3038;
    color: #adadad;
    font-weight: lighter;
    font-family: "Roboto", sans-serif;
}

.StaticForm .FormField input::placeholder {
    border: none;
    background: #2f3038;
    color: #adadad;
    font-weight: lighter;
    font-family: "Roboto", sans-serif;
}

.StaticForm .FormField.Split {
    display: inline-block;
    float: right;
    min-height: 41px;
    width: calc(50% - 27px);
}

.StaticForm .FormField.Split button {
    min-height: 41px;
    background-color: #4b8ddb;
    cursor: pointer;
}

.StaticForm .FormField.Split button:hover {
    background-color: #3680d7;
}

.StaticForm .FormField.Split:nth-child(odd) {
    float: left;
}

.StaticForm .FormField.Full {
    display: inline-block;
    float: left;
    width: calc(100% - 18px);
}

.StaticForm .FormField.Red,
.StaticForm .FormField.Blue {
    padding-top: 0;
    padding-bottom: 0;
    border: none;
}

.StaticForm .FormField.Red button,
.StaticForm .FormField.Blue button {
    min-height: 61px;
    border: none;
    border-bottom: 3px solid #b22c2c;
    border-radius: 3px;
    background: #ce3939;
    color: white;
}

.StaticForm .FormField.Red button:hover,
.StaticForm .FormField.Blue button:hover {
    background: #c23030;
    color: #f2f2f2;
    cursor: pointer;
}

.StaticForm .FormField.Blue button {
    border-bottom: 3px solid #374d94;
    background: #415bae;
}

.StaticForm .FormField.Blue button:hover {
    background: #3a519b;
}

.StaticForm input,
.StaticForm textarea,
.StaticForm button,
.StaticForm select {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    outline: none;
    border: none;
    background-color: #2f3038;
    color: white;
    font-size: 1.3em;
    font-family: "Roboto", sans-serif;
    resize: none;
}

.StaticForm .FormSubmit input,
.StaticForm .FormSubmit button,
.StaticForm .FormSubmit select {
    padding: 10px;
    border: none;
    border-bottom: 3px solid #1b3669;
    background: #415bae;
    color: white;
}

.StaticForm .FormSubmit input:hover,
.StaticForm .FormSubmit button:hover,
.StaticForm .FormSubmit select:hover {
    background: #3a519b;
    color: #f2f2f2;
    cursor: pointer;
}
<div class="Accounts Container">
    <div class="Content">
        <form id="TeacherForm" class="StaticForm" enctype="multipart/form-data" autocomplete="off" onkeypress="return event.keyCode != 13;">
            <ul>
                <li class="FormField Split">
                    <label for="teacher_code">Teacher code</label>
                    <input id="TeacherCode" type="text" name="teacher_code" maxlength="4" placeholder="Type teachers code" autofocus>
                </li>
                <li class="FormField Split">
                    <label for="name">Teacher name</label>
                    <input id="TeacherName" type="text" name="name" maxlength="255" placeholder="Type teachers name">
                </li>
                <li class="FormField Split">
                    <label for="email">Teacher email</label>
                    <input id="TeacherEmail" type="email" name="email" maxlength="255" placeholder="Type teachers email">
                </li>
                <li class="FormField Split">
                    <label for="password">Teacher password</label>
                    <input id="TeacherPassword" onfocus="RunOnce();" type="text" name="password" maxlength="255" placeholder="Type teachers password">
                </li>
                <li class="FormField Split">
                    <label for="department_id">Teacher department</label>
                    <input id="TeacherDepartment" type="text" name="department_id" maxlength="255" placeholder="Type teachers department">
                </li>
                <li class="FormField Split">
                    <label>Teacher subject</label>
                    <input id="TeacherSubject" type="text" name="subject_id" maxlength="255" placeholder="Type teachers subject">
                </li>
                <li class="FormField Full">
                    <label for="elevation">Teacher elevation</label>
                    <div class="radio">
                        <input id="teacher" class="TeacherElevation" name="elevation" type="radio" value=0 checked>
                        <label for="teacher" class="radio-label">Teacher</label>
                    </div>
                    <div class="radio">
                        <input id="tic" class="TeacherElevation" name="elevation" type="radio" value=1>
                        <label for="tic" class="radio-label">Teacher in charge</label>
                    </div>
                    <div class="radio">
                        <input id="hol" class="TeacherElevation" name="elevation" type="radio" value=2>
                        <label for="hol" class="radio-label">Head of learning</label>
                    </div>
                    <div class="radio">
                        <input id="sysadmin" class="TeacherElevation" name="elevation" type="radio" value=3>
                        <label for="sysadmin" class="radio-label">Systems admin</label>
                    </div>
                </li>
                <li class="FormSubmit">
                    <button id="TeacherSubmit">Register teacher</button>
                </li>
            </ul>
        </form>
    </div>
</div>

【问题讨论】：

    标签： html css microsoft-edge forms


    【解决方案1】： 

    html {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  height: 100%;
  background: #363740 url("../media/bg.jpg") repeat scroll;
}

body {
  margin: 0px;
  padding: 0px;
  min-height: 100%;
  width: 100%;
}

a {
  color: #4b8ddb;
  text-decoration: none;
}

table.top_pattern {
  width: 100%;
  border-collapse: collapse;
}

table.top_pattern tbody tr td {
  display: table-cell;
  padding: 0;
  width: 14%;
  height: 5px;
}

table.top_pattern tbody tr td.tc_1 {
  background: #7c8bc5;
}

table.top_pattern tbody tr td.tc_2 {
  background: #799c0c;
}

table.top_pattern tbody tr td.tc_3 {
  background: #2e4795;
}

.radio {
  margin: 0.5rem;
}

.radio label {
  font-size: 1.2em;
}

.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.radio input[type="radio"] + .radio-label:before {
  position: relative;
  display: inline-block;
  margin-right: .8em;
  width: 1em;
  height: 1em;
  border: 1px solid #415086;
  border-radius: 100%;
  background: white;
  content: '';
  vertical-align: top;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}

.radio input[type="radio"]:checked + .radio-label:before {
  background-color: #4b8ddb;
  -webkit-box-shadow: inset 0 0 0 4px white;
  box-shadow: inset 0 0 0 4px white;
  font-size: 1.2em;
}

.radio input[type="radio"]:focus + .radio-label:before {
  outline: none;
  border-color: #4b8ddb;
}

.radio input[type="radio"] + .radio-label:empty:before {
  margin-right: 0;
}
.Important {
  padding: 10px;
  border-bottom: solid 1px black;
  background: rgba(139, 168, 46, 0.81);
  text-align: center;
  font-size: 1.2em;
  font-family: "Lato", sans-serif;
}

h1.Important {
  margin-top: 0em;
  margin-bottom: 0;
  border-top: solid 1px black;
  background: rgba(209, 209, 209, 0.7);
  font-weight: 500;
  font-size: 2.1em;
  font-family: "Roboto", sans-serif;
}

p, ul {
  color: white;
  font-size: 1.3em;
  font-family: "Tahoma", sans-serif;
  line-height: 1.3em;
}

ul {
  margin: 1em 0;
}

h2 {
  color: white;
  font-size: 1.4em;
  font-family: "Roboto", sans-serif;
}

.Container {
  padding-bottom: 2.8em;
}

.Container .Content {
  margin: 1.7em 3em 0em 3em;
  padding: 1.5em;
  border: 1px solid #45464f;
  background: #363740;
}

.StaticForm {
  padding: 2em 1em 1em 1em;
  min-height: 70px;
  width: calc(100% - 32px);
  border: 1px solid #45464f;
  background: #2f3038;
  font-family: "Century Gothic", sans-serif;
}

.StaticForm ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.StaticForm .FormField {
  display: block;
  margin-bottom: 30px;
  padding: 9px;
  border: 1px solid #45464f;
}

.StaticForm .FormField:last-child {
  margin-bottom: 0px;
  border: none;
  text-align: center;
}

.StaticForm .FormField > label:first-child {
  display: inline-block;
  overflow: hidden;
  margin-top: -28px;
  padding: 5px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
   width:-ms-fit-content;
  width: fit-content;
  background: #2f3038;
  color: #4b8ddb;
  font-size: 1.4em;
  font-family: "Lato", sans-serif;
}

.StaticForm .FormField input::-webkit-input-placeholder {
  border: none;
  background: #2f3038;
  color: #adadad;
  font-weight: lighter;
  font-family: "Roboto", sans-serif;
}

.StaticForm .FormField input:-ms-input-placeholder {
  border: none;
  background: #2f3038;
  color: #adadad;
  font-weight: lighter;
  font-family: "Roboto", sans-serif;
}

.StaticForm .FormField input::placeholder {
  border: none;
  background: #2f3038;
  color: #adadad;
  font-weight: lighter;
  font-family: "Roboto", sans-serif;
}

.StaticForm .FormField.Split {
  display: inline-block;
  float: right;
  min-height: 41px;
  width: calc(50% - 27px);
}

.StaticForm .FormField.Split button {
  min-height: 41px;
  background-color: #4b8ddb;
  cursor: pointer;
}

.StaticForm .FormField.Split button:hover {
  background-color: #3680d7;
}

.StaticForm .FormField.Split:nth-child(odd) {
  float: left;
}

.StaticForm .FormField.Full {
  display: inline-block;
  float: left;
  width: calc(100% - 18px);
}

.StaticForm .FormField.Red, .StaticForm .FormField.Blue {
  padding-top: 0;
  padding-bottom: 0;
  border: none;
}

.StaticForm .FormField.Red button, .StaticForm .FormField.Blue button {
  min-height: 61px;
  border: none;
  border-bottom: 3px solid #b22c2c;
  border-radius: 3px;
  background: #ce3939;
  color: white;
}

.StaticForm .FormField.Red button:hover,
.StaticForm .FormField.Blue button:hover {
  background: #c23030;
  color: #f2f2f2;
  cursor: pointer;
}

.StaticForm .FormField.Blue button {
  border-bottom: 3px solid #374d94;
  background: #415bae;
}

.StaticForm .FormField.Blue button:hover {
  background: #3a519b;
}

.StaticForm input,
.StaticForm textarea,
.StaticForm button,
.StaticForm select {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  width: 100%;
  outline: none;
  border: none;
  background-color: #2f3038;
  color: white;
  font-size: 1.3em;
  font-family: "Roboto", sans-serif;
  resize: none;
}

.StaticForm .FormSubmit input,
.StaticForm .FormSubmit button,
.StaticForm .FormSubmit select {
  padding: 10px;
  border: none;
  border-bottom: 3px solid #1b3669;
  background: #415bae;
  color: white;
}

.StaticForm .FormSubmit input:hover,
.StaticForm .FormSubmit button:hover,
.StaticForm .FormSubmit select:hover {
  background: #3a519b;
  color: #f2f2f2;
  cursor: pointer;
}
    <html lang=en>

<head>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="Brandon Lovegrove" />
  <meta charset="UTF-8" />
  <title>Options Selection - demo</title>
  <link rel="icon" type="image/x-icon" href="./media/favicon.ico" />
  <link rel="stylesheet" href="./css/complete.css" />
</head>

<body>
  <table class="top_pattern">
    <tbody>
      <tr>
        <td class="tc_1"></td>
        <td class="tc_2"></td>
        <td class="tc_3"></td>
        <td class="tc_1"></td>
        <td class="tc_2"></td>
        <td class="tc_3"></td>
        <td class="tc_1"></td>
      </tr>
    </tbody>
  </table>
  <div class="Canvas">
    <div class="Accounts Container">
      <div class="Content">
        <form id="TeacherForm" class="StaticForm" enctype="multipart/form-data" autocomplete="off" onkeypress="return event.keyCode != 13;">
          <ul>
            <li class="FormField Split">
              <label for="teacher_code">Teacher code</label>
              <input id="TeacherCode" type="text" name="teacher_code" maxlength="4" placeholder="Type teachers code" autofocus>
            </li>
            <li class="FormField Split">
              <label for="name">Teacher name</label>
              <input id="TeacherName" type="text" name="name" maxlength="255" placeholder="Type teachers name">
            </li>
            <li class="FormField Split">
              <label for="email" >Teacher email</label>
              <input id="TeacherEmail" type="email" name="email" maxlength="255" placeholder="Type teachers email">
            </li>
            <li class="FormField Split">
              <label for="password">Teacher password</label>
              <input id="TeacherPassword" type="password" name="password" maxlength="255" placeholder="Type teachers password">
            </li>
            <li class="FormField Split">
              <label for="department_id">Teacher department</label>
              <input id="TeacherDepartment" type="text" name="department_id" maxlength="255" placeholder="Type teachers department">
            </li>
            <li class="FormField Split">
              <label>Teacher subject</label>
              <input id="TeacherSubject" type="text" name="subject_id" maxlength="255" placeholder="Type teachers subject">
            </li>
            <li class="FormField Full">
              <label for="elevation">Teacher elevation</label>
              <div class="radio">
                <input id="teacher" class="TeacherElevation" name="elevation" type="radio" value=0 checked>
                <label for="teacher" class="radio-label">Teacher</label>
              </div>
              <div class="radio">
                <input id="tic" class="TeacherElevation" name="elevation" type="radio" value=1>
                <label for="tic" class="radio-label">Teacher in charge</label>
              </div>
              <div class="radio">
                <input id="hol" class="TeacherElevation" name="elevation" type="radio" value=2>
                <label for="hol" class="radio-label">Head of learning</label>
              </div>
              <div class="radio">
                <input id="sysadmin" class="TeacherElevation" name="elevation" type="radio" value=3>
                <label for="sysadmin" class="radio-label">Systems admin</label>
              </div>
            </li>
            <li class="FormSubmit">
              <button id="TeacherSubmit">Register teacher</button>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
</body>

</html>

    【讨论】：

    • 有效！谢谢你。虽然你到底改变了什么？
    猜你喜欢
    • 1970-01-01
    • 2020-02-23
    • 2015-09-22
    • 1970-01-01
    • 2021-05-04
    • 1970-01-01
    • 2011-11-20
    • 2011-05-05
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode