0
所以我一直在用我正在開發的一個項目中的表單搞亂 - 並且發現在Microsoft Edge上，我的表單字段上的標籤頂部邊框消失了（我假設標籤被設置爲width: 100%;並覆蓋它），到目前爲止，我不能在任何其他瀏覽器或重新創建這是這樣做的CSS在哪裏。沒有指令的情況下，MS-Edge上的HTML表單字段標籤被設置爲100％寬度？
下面是代碼片段和CodePen的鏈接（所以你可以在Edge上全屏看到它）。
圖片：Form input comparison: Chrome Vs. Edge
CodePen：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>
它的工作原理！謝謝。儘管你改變了什麼？ –