Элементы сетки, перекрывающиеся в IE11 - PullRequest
Новая
       75

Элементы сетки, перекрывающиеся в IE11

0 голосов
/ 17 марта 2020

У меня есть таблица со строкой, которая должна показывать данные с вложенными строками. Чтобы убедиться, что данные для «Имя посетителя, Название» и «Компания посетителя, организация или другое» правильно размещают содержимое по вертикали и отображают данные в правильной строке, я пытаюсь использовать сетку. Это хорошо работает в Chrome, но в IE два столбца сетки перекрываются на меньшем дисплее.

Как я могу исправить это для IE11? 

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "Left Right";
  column-gap: 1.5em;
}

.Left {
  grid-area: Left;
}

.Right {
  grid-area: Right;
}

@media all and (-ms-high-contrast:none) {
  .grid-container {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
    -ms-grid-rows: 1fr;
  }

  .Left {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    padding-right: .75em;
  }

  .Right {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    padding-left: .75em;
  }

}
<link href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css" rel="stylesheet"/>
<section class="section">
  <div class="container">
    <table class="table is-fullwidth">
      <thead>
        <tr>
          <th>Transaction Date</th>
          <th>Merchant Name</th>
          <th>Transaction Amount</th>
          <th>Expense Type</th>
          <th>Expense Category</th>
          <th>Business Purpose</th>
          <th>
            <div class="grid-container">
              <div class="Left">Attendee Name, Title</div>
              <div class="Right">Attendee Company, Org., or other</div>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>12/15/2019</td>
          <td>Apple</td>
          <td>14.97</td>
          <td>Business Travel</td>
          <td>Single Day Mean/Incidental</td>
          <td>A really long paragraph could be here to show Business Purpose.</td>
          <td>
            <div class="columns">
              <div class="column">
                John Doe, Analyst
              </div>
              <div class="column">
                Some Company
              </div>
            </div>
            <div class="columns">
              <div class="column">
                Jane Smith, Analyst
              </div>
              <div class="column">
                Some Company
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>12/18/2019</td>
          <td>Nike</td>
          <td>9.96</td>
          <td>Business Travel</td>
          <td>Airline Ticket</td>
          <td>A really long paragraph could be here to show Business Purpose.</td>
          <td>
            <div class="grid-container">
              <div class="Left">
                Jane Doe, Analyst
              </div>
              <div class="Right">
                Another Company
              </div>
            </div>
            <div class="grid-container">
              <div class="Left">
                John Smith, Analyst
              </div>
              <div class="Right">
                Another Company
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

1 Ответ

0 голосов
/ 17 марта 2020

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

enter image description here

Я проверяю код и обнаружил, что если вы удалите приведенный ниже код из @ media all и (-ms-high-контраст: нет) {.grid-container , то проблема может быть решена в браузере IE 11. 

-ms-grid-columns: 1fr 1fr;

Модифицированный код: 

<!doctype html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css" rel="stylesheet"/>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "Left Right";
  column-gap: 1.5em;
}

.Left {
  grid-area: Left;
}

.Right {
  grid-area: Right;
}

@media all and (-ms-high-contrast:none) {
  .grid-container {
    display: -ms-grid;
    /*-ms-grid-columns: 1fr 1fr;*/
    -ms-grid-rows: 1fr;
  }

  .Left {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    padding-right: .75em;
  }

  .Right {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    padding-left: .75em;
  }

}
</style>

</head>
<body>
<section class="section">
  <div class="container">
    <table class="table is-fullwidth">
      <thead>
        <tr>
          <th>Transaction Date</th>
          <th>Merchant Name</th>
          <th>Transaction Amount</th>
          <th>Expense Type</th>
          <th>Expense Category</th>
          <th>Business Purpose</th>
          <th>
            <div class="grid-container">
              <div class="Left">Attendee Name, Title</div>
              <div class="Right">Attendee Company, Org., or other</div>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>12/15/2019</td>
          <td>Apple</td>
          <td>14.97</td>
          <td>Business Travel</td>
          <td>Single Day Mean/Incidental</td>
          <td>A really long paragraph could be here to show Business Purpose.</td>
          <td>
            <div class="columns">
              <div class="column">
                John Doe, Analyst
              </div>
              <div class="column">
                Some Company
              </div>
            </div>
            <div class="columns">
              <div class="column">
                Jane Smith, Analyst
              </div>
              <div class="column">
                Some Company
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>12/18/2019</td>
          <td>Nike</td>
          <td>9.96</td>
          <td>Business Travel</td>
          <td>Airline Ticket</td>
          <td>A really long paragraph could be here to show Business Purpose.</td>
          <td>
            <div class="grid-container">
              <div class="Left">
                Jane Doe, Analyst
              </div>
              <div class="Right">
                Another Company
              </div>
            </div>
            <div class="grid-container">
              <div class="Left">
                John Smith, Analyst
              </div>
              <div class="Right">
                Another Company
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
</body>
</html>

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

enter image description here

...