IE11：引導列行為不正常

Question

我正在嘗試使我的網站兼容 IE11。

我在一行中有 2 列，它們都應該有不同的高度。 我試過

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&nbsp;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,&nbsp;udarbejder vi din ideal&nbsp;QTI-profil og sender den til dig.</p> <p>Den fulde QTI-test, som din uddannelsesinstitution&nbsp;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&nbsp;dine elever opfatter dig som klasseleder.</p> <p>Ved køb af licens skal to af&nbsp;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>

Answer 1

通過首先不使用引導程序解決