IE grid-template-columns Обходной путь - PullRequest
Новая
       20

IE grid-template-columns Обходной путь

0 голосов
/ 24 апреля 2020

Я только что заметил, что мой веб-сайт плохо выполняет рендеринг в IE и после копания в нем ... поддержка grid-template-columns кажется причиной root. Я последовал совету предыдущих вопросов и добавил теги, связанные с ms, но по какой-то причине я все еще не получаю, чтобы он хорошо отображался.

Я бы не хотел go вернуться к тому, чтобы все расставить, и надеялся получить какой-нибудь совет .... 

.grid-container {
     display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr 1fr;
     display: grid;  grid-template-columns: 25% 25% 25% 25%; }

.grid-item {text-align: center;}

html

<div class="grid-container">
    <div class="grid-item">
        First Name: <input type="text" id="inputIdentifyFirstName">
    </div>
    <div class="grid-item">
        Last Name: <input type="text" id="inputIdentifyLastName">
    </div>
</div>

Очевидно, что я могу предоставить больше элементов сетки при необходимости (контейнер ожидает 4 в поперечнике), но я чувствовал, что 2 должно быть достаточно, чтобы получить изображение.

1 Ответ

0 голосов
/ 27 апреля 2020

Если это возможно для вас, вы можете попытаться обратиться к приведенному ниже примеру, который поможет вам правильно отображать текстовые поля в браузере IE. 

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 40px;

}

/*autoprefixer will add the prefixed properties for grid and columns/rows*/
.wrapper {
  display: -ms-grid;
  display: grid; 
  -ms-grid-columns: 300px 300px 300px;
  grid-template-columns: 300px 300px 300px;
 
}

.box {
 
 
  padding: 20px;
  font-size: 100%;
}


/* in the current spec these would be postioned using auto-placement. For IE we need to set the position of the items. */
.a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.b {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.c {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.d {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
}


}
</style>
</head>
<body>

<div class="wrapper">
  <div class="box a"> First Name: <input type="text" id="inputIdentifyFirstName"></div>
  <div class="box b">Last Name: <input type="text" id="inputIdentifyLastName"></div>
  <div class="box c">Address: <input type="text" id="inputAddress"></div>
  <div class="box d">DOB: <input type="text" id="inputDob"></div>
 
</div>

</body>
</html>

Вывод в браузере IE 11:

enter image description here

Может дать неожиданные результаты в других браузерах. Вы можете применять эти стили только для браузера IE или можете попробовать изменить его в соответствии с вашими требованиями.

...