Проблема с краем: высота 100% в ячейке сетки CSS, получая значение ширины 100% - PullRequest
Новая
       19

Проблема с краем: высота 100% в ячейке сетки CSS, получая значение ширины 100%

0 голосов
/ 31 октября 2019

Я пытаюсь использовать CSS-сетку для вертикального и горизонтального центрирования некоторого текста в области заголовка / заголовка и сделать эту область (и весь макет) несколько гибкой / отзывчивой.

У меня естьнастройте простой пример в этом коде ручки , но если вы не хотите идти туда, HTML и CSS в этом примере: 

<div class='layout'>
  <div class='titleArea'>
    <svg viewBox='0 0 100 100' preserveAspectRatio='xMidYMid meet'>
      <text x='50%' y='60%' textAnchor='middle' dy='0.07em' class='titleText'>
        Hello World
      </text>
    </svg>
  </div>
  <div class='mainArea'>
  </div>
</div>

и это:

.layout {
  height: 400px;
  border: 1px solid red;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: minmax(80px, 1fr) minmax(200px, 3fr);
  grid-template-columns: 1fr;
  grid-template-rows: minmax(80px, 1fr) minmax(200px, 3fr);
}
.titleArea {
  border: 1px solid blue;
  width: 100%;
  -ms-grid-row: 1;

  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;

  svg {
    height: 100%;
    width: 100%;
    /* uncomment line below to see text centering work in Edge */
    /* max-height: 80px; */
    justify-self: center;
    align-self: center;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }
}
.titleText {
  font-size: 2.5em;
}
.mainArea {
  border: 1px solid green;
}

Центрирование и сгибание не вполне работают в ручке, но это довольно близко, и, конечно, если смотреть в Edge, проблема становится очевидной.

Если я открою некоторые инструменты разработки и пойду и посмотрю, что происходит, height: 100% вычисляется не как высота родительского контейнера, а совпадает с тем, что рассчитано для width: 100%, что делает текст визуализированным огромным и полностьювырывается из родительского контейнера. Если я установлю значение max-height в пределах того диапазона, который, как я ожидаю, будет изгибаться, то все обернется и текст окажется там, где и должен, но затем он замерзнет в этом размере и не будет слегка уменьшаться / растипри изменении области просмотра.

Есть ли какое-то решение для этого или это допустимая ошибка в Edge?

Вышеуказанная настройка прекрасно работает в Chrome, Firefox и даже в IE 11,проблема только с Edge.

1 Ответ

0 голосов
/ 31 октября 2019

Я воспроизвел эту проблему на своем компьютере, похоже, что проблема связана с атрибутом x и y элемента SVG, он установит начальную точку базовой линии текста на основе всей страницы, а неэлемент SVG. Вполне возможно, что это какая-то ошибка или поведение Edge по умолчанию. Я постараюсь отправить отзыв по этому вопросу.

В качестве обходного пути я предлагаю вам попробовать изменить CSS-единицы , например, «px». И вы можете изменить свой код следующим образом: 

<style>
    .layout {
        height: 400px;
        border: 1px solid red;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: minmax(80px, 1fr) minmax(200px, 3fr);
        grid-template-columns: 1fr;
        grid-template-rows: minmax(80px, 1fr) minmax(200px, 3fr);
    }

    .titleArea {
        border: 1px solid blue;
        width: 100%;
        -ms-grid-row: 1;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        text-align: center;
    }

        .titleArea svg {
            height: 100%;
            width: 100%;
            /* uncomment line below to see text centering work in Edge */
            /* max-height: 80px; */
            justify-self: center;
            align-self: center;
            -ms-grid-column: 1;
            -ms-grid-row: 1;
        }

    .titleText {
        font-size: 20px;
    }

    .mainArea {
        border: 1px solid green;
    }
</style>
<div class='layout'>
    <div class='titleArea'>
        <svg width="100%" height="100" preserveAspectRatio='xMidYMid meet'>
            <text x='50%' y='50' textAnchor='middle' dy='0.07em' class='titleText'>
                Hello World
            </text>
        </svg>
    </div>
    <div class='mainArea'>
    </div>
</div>

Результат, как показано ниже (с использованием версии Microsoft Edge 44.18362.387.0):

enter image description here

...