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

标签 html css microsoft-edge forms

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

下面是代码片段和 CodePen 的链接(因此您可以在 Edge 上全屏查看)。

图片:Form input comparison: Chrome Vs. Edge

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

注意:为获得最佳效果，请在代码片段上使用全屏

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

关于HTML 表单字段标签在没有说明的情况下在 MS-Edge 上设置为 100% 宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46423556/

上一篇：javascript - Bootstrap 4 导航下拉列表问题

下一篇：html - 如何在文本下方使用 png 图像创建导航菜单

相关文章：

html - 将菜单栏在中心与特定宽度对齐

javascript - 通过 for 循环将事件监听器应用于按钮？

javascript - 如何通过setInterval设置div元素的图片背景？

html - 无法更改导航栏的文本定位

javascript - 摆脱边缘必填字段的默认验证消息

javascript - 无法在 IE 中访问 HTML 元素的原型(prototype)

html - Css slider 关键帧循环结束显示空白页

javascript - jQuery 自动完成样式 : match parent text input's style

css - 您可以使用 CSS 向 PNG 内容添加非方形阴影吗？

css - 如何在Edge浏览器中使用CSS变量作为关键帧动画的背景颜色

©2024 IT工具网  联系我们