我想让我的网站兼容IE11。
我在一行内有两列,这两列应该有不同的高度。
height:auto;
这在chrome中很好用,但在IE11中就不行了。它的渲染是这样的。
右边那个是IE11,我想让它像Chrome一样,表格框与内容相匹配。我在下面附上了我的完整代码,可能会很乱,所以要注意。
html {
margin: 0px;
height: 100%;
width: 100%; }
body {
margin: 0px;
min-height: 100%;
width: 100%; }
.form-popup {
position: fixed;
top: 50%;
left: 50%; }
.content-wrapper {
margin: 0 2%; }
.content-wrapper > * {
margin: auto; }
.page-wrapper {
min-height: 100%;
width: 100%;
margin: 0;
padding: 0; }
.page-wrapper--bg-cover {
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
.form-wrapper {
height: auto !important;
display: -ms-grid;
display: grid;
-ms-grid-rows: auto 12px auto 12px auto 12px auto 12px auto 12px auto;
grid-template-rows: repeat(6, 1fr);
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
grid-gap: 12px;
background-color: white;
padding: 40px; }
@media all and (max-width: 576px) {
.form-wrapper {
grid-template-rows: 2fr repeat(2, 1fr); } }
@media all and (min-width: 768px) and (max-width: 992px) {
.form-wrapper {
grid-template-rows: 2fr repeat(2, 1fr); } }
.name-input {
display: -ms-grid;
display: grid;
grid-gap: 12px;
-ms-grid-columns: 1fr 12px 1fr;
grid-template-columns: repeat(2, 1fr); }
.name-input input {
border: none;
background: none; }
@media all and (max-width: 576px) {
.name-input {
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr 12px 1fr;
grid-template-columns: 1fr; } }
@media all and (min-width: 768px) and (max-width: 992px) {
.name-input {
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr 12px 1fr;
grid-template-columns: 1fr; } }
.name-field {
padding: 13px;
padding-top: 10.5px;
padding-bottom: 10.5px;
background-color: #f4f7f6;
font-family: sans-serif;
overflow: hidden;
max-width: 100%; }
.name-field input {
width: 100%; }
.name-field--column1 {
-ms-grid-column: 1;
-ms-grid-row: 1; }
@media all and (max-width: 576px) {
.name-field--column1 {
-ms-grid-column: 1;
-ms-grid-row: 1; } }
@media all and (min-width: 768px) and (max-width: 992px) {
.name-field--column1 {
-ms-grid-column: 1;
-ms-grid-row: 1; } }
.name-field--column3 {
-ms-grid-column: 3;
-ms-grid-row: 1; }
@media all and (max-width: 576px) {
.name-field--column3 {
-ms-grid-column: 1;
-ms-grid-row: 3; } }
@media all and (min-width: 768px) and (max-width: 992px) {
.name-field--column3 {
-ms-grid-column: 1;
-ms-grid-row: 3; } }
.name-field--has-label {
display: -ms-grid;
display: grid;
-ms-grid-columns: 25px auto;
grid-template-columns: 25px auto; }
.email-field {
padding: 13px;
padding-top: 10.5px;
padding-bottom: 10.5px;
background-color: #f4f7f6;
font-family: sans-serif;
overflow: hidden;
max-width: 100%; }
.email-field input {
background: none;
border: none;
width: 100%; }
.email-field--has-label {
display: -ms-grid;
display: grid;
-ms-grid-columns: 25px auto;
grid-template-columns: 25px auto; }
.phone-field {
padding: 13px;
padding-top: 10.5px;
padding-bottom: 10.5px;
background-color: #f4f7f6;
font-family: sans-serif;
overflow: hidden;
max-width: 100%; }
.phone-field input {
background: none;
border: none; }
.phone-field--has-label {
display: -ms-grid;
display: grid;
-ms-grid-columns: 25px auto;
grid-template-columns: 25px auto; }
.school-field {
padding: 13px;
padding-top: 10.5px;
padding-bottom: 10.5px;
background-color: #f4f7f6;
font-family: sans-serif;
overflow: hidden;
max-width: 100%; }
.school-field input {
background: none;
border: none; }
.school-field--has-label {
display: -ms-grid;
display: grid;
-ms-grid-columns: 25px auto;
grid-template-columns: 25px auto; }
.submit-button {
margin: 0 auto;
width: 75%; }
.submit-button__button {
background: none;
border: none;
width: 100%;
background-color: #7edcff;
color: white;
border-radius: 50px;
font-size: 16px;
text-align: center;
padding: 13px;
-webkit-box-shadow: 0 6px 14px 0 rgba(126, 220, 255, 0.44);
box-shadow: 0 6px 14px 0 rgba(126, 220, 255, 0.44); }
.example-download {
display: -ms-grid;
display: grid;
-ms-grid-columns: auto auto;
grid-template-columns: auto auto;
margin: 13px auto; }
.example-download__text {
display: inherit;
margin: auto 2px;
font-size: 13px;
text-align: center;
line-height: 1.15;
color: #878787; }
.example-download__link {
display: inherit;
width: auto;
margin: auto 2px;
font-size: 13px;
text-align: center;
line-height: 1.15;
color: #7edcff;
text-decoration: underline; }
.ideal-box {
color: black;
font-family: sans-serif;
text-align: left;
line-height: 1.15;
padding-top: 46px; }
@media all and (max-width: 576px) {
.ideal-box {
text-align: center; } }
.ideal-box:before {
position: absolute;
height: 20px;
content: "";
width: 200px;
border-top: 12px solid #000000;
top: 0;
left: 15px; }
.ideal-box__header {
line-height: 1.3;
font-size: 36px; }
.ideal-box__header--bold {
font-weight: bold; }
.headline {
margin: 0 auto 58px; }
.headline__teacher {
max-width: 750px;
font-size: 58px;
font-family: sans-serif;
color: black;
text-align: center; }
.headline__teacher--bold {
font-weight: bold; }
.headline__teacher--centered {
margin: 0 auto; }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src=" https://code.jquery.com/jquery-3.2.1.slim.min.js " integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN "
crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js " integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q "
crossorigin="anonymous "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js " integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl "
crossorigin="anonymous "></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js "></script>
<meta name="viewport " content="width=device-width, initial-scale=1.0 ">
<title>Start Trial</title>
</head>
<body class="page-wrapper page-wrapper--bg-cover align-items-center " style="background:linear-gradient(0deg,rgba(251,
238, 229,0.9),rgba(251, 238, 229,0.9)),url(/img/webpnet-compress-image.jpg); ">
<header>
<nav class="nav ">
</nav>
</header>
<div class="form-popup" style="display:none;">HEJ GRIMME!</div>
<div class="container-fluid">
<div class="row headline">
<h1 class="headline__teacher headline__teacher--bold headline__teacher--centered">Lærer: Prøv QTI på dig selv</h1>
</div>
<div class="row content-wrapper justify-content-between">
<div class="ideal-box col-12 col-md-4">
<h2 class="ideal-box__header ideal-box__header--bold">Skab din egen idealprofil</h2>
<p>Prøv QTI på dig selv helt gratis! Udfyld kontaktformularen, så sender vi dig et link til den del af
QTI-testen, der handler om din ideale QTI-profil.</p>
<p>Når du har besvaret de 32 spørgsmål om, hvordan du gerne vil lede din klasse, udarbejder vi din ideal QTI-profil
og sender den til dig.</p>
<p>Den fulde QTI-test, som din uddannelsesinstitution skal købe licens til, indeholder også besvarelse
af spørgsmålene ud fra, hvordan du opfatter dit samspil med en bestemt klasse, og hvordan dine elever
opfatter dig som klasseleder.</p>
<p>Ved køb af licens skal to af de pædagogiske ledere på din uddannelsesinstitution gennemføre et certificeringskursus.
Certificeringen sikrer dig en kvalificeret udviklingsdialog med din leder og er samtidig din garanti
for en etisk forsvarlig brug af QTI.</p>
</div>
<form class="form-wrapper col-12 col-md-4">
<div class="name-input">
<div class="name-field name-field--has-label name-field--column1">
<label style="margin: 0 auto;" style="-ms-grid-column: 1; -ms-grid-row: 1;">
<i class="far fa-user"></i>
</label>
<input type="name" name="Firstname" placeholder="Fornavn" style="-ms-grid-column:
3; -ms-grid-row: 1;">
</div>
<div class="name-field name-field--column3">
<input type="name" name="Lastname" placeholder="Efternavn">
</div>
</div>
<div class="email-field email-field--has-label " style="-ms-grid-row: 3;">
<label style="margin: 0 auto;" style="-ms-grid-column: 1; -ms-grid-row: 1;">
<i class="far fa-envelope"></i>
</label>
<input type="email" required placeholder="E-mail" style="width:100%; -ms-grid-column: 3; -ms-grid-row:
1;" name="Email">
</div>
<div class="phone-field phone-field--has-label " style="-ms-grid-row: 5; ">
<label style="margin: 0 auto; height:16px; " style="-ms-grid-column: 1; -ms-grid-row: 1; ">
<i class="fas fa-phone " data-fa-transform="rotate-90 "></i>
</label>
<input maxlength="8" type="tel" placeholder="Telefon" style="width:100%; -ms-grid-column: 3; -ms-grid-row:
1;">
</div>
<div class="school-field school-field--has-label " style="-ms-grid-row: 7; ">
<label style="margin: 0 auto; height:16px; " style="-ms-grid-column: 1; -ms-grid-row: 1; ">
<i class="fas fa-graduation-cap "></i>
</label>
<input type="text" placeholder="Skole" style="width:100%; -ms-grid-column: 3; -ms-grid-row: 1;">
</div>
<div class="submit-button" style="-ms-grid-row: 9;">
<input class="submit-button__button" type="submit" value="Send">
</div>
<div class="example-download" style="-ms-grid-row: 11;">
<p class="example-download__text" style="-ms-grid-column: 1;">Se eksempel på en QTI-profil-rapport</p>
<a class="example-download__link" style="-ms-grid-column: 2;" href="https://qti.dk/files/4/qti-profil.pdf">
Download PDF
</a>
</div>
</form>
</div>
</div>
</body>
<script>
$('document').ready(function() {
$('.form-wrapper').submit(function() {
$('.form-popup').toggle(1000);
return false;
})
})
</script>
</html>
解决的方法是先不使用bootstrap。