Выравнивание текста Microsoft Edge CSS

Это только у меня или в браузере Windows 10 Edge есть довольно неприятная ошибка?

Я только что понял, что выравнивание текста в Edge работает не так, как ожидалось.

у меня есть

<div style='text-align:justify;'>
<h3> This is a short text </h3>
<div class='small_box'>some content </div>
<div class='small_box'>some content </div>
<div class='small_box'>some content </div>
etc...
<div class='small_box'>some content </div>
</div>

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

Я провел некоторое тестирование, и похоже, что это странное поведение проявляется только в определенных элементах html: заголовках (h1,h2,h3), span и div. Если вместо заголовка я использую абзац <p>, он отображается должным образом.

Временную ссылку можно увидеть здесь. Вскоре я также создам скрипач и обновлю ссылка для дальнейшего использования.

Правильно ли я говорю, что это ошибка нового браузера, выпущенного Microsoft?


html css microsoft-edge
person Emil Borconi    schedule 25.08.2015    source источник
comment
Похоже, что ..._ 1_ определенно не должны растягивать текстовые символы. Но пока не могу протестировать. Краткая демонстрация JSfiddle этой проблемы с вашим CSS была бы полезна.   -  person Paulie_D    schedule 25.08.2015

Ответы (2)


arrow_upward
1
arrow_downward

Моя собственная глупость.

Я возглавляю унаследованное имущество: text-justify: distribute-all-lines, которое я пропустил. В зависимости от определения свойства последняя строка текста будет растянута до ширины родительского элемента. IE 9,10,11 применял его только в том случае, если в тексте было несколько строк, но похоже, что Edge применяет его к последней строке, независимо от того, является ли последняя строка первой и единственной строкой одновременно.

Перечитывая документацию MSDN, я могу чтобы согласиться с поведением Edge, но тогда возникает вопрос, почему оно отличается в IE 9,10,11?

Не говоря уже об очередной причуде Microsoft.

Закрытие вопроса.

person Emil Borconi    schedule 25.08.2015

arrow_upward
0
arrow_downward

попробуйте использовать padding-left и right

 .box-div {    
   height: 80vh;
   overflow-y: scroll;
   background-color: whitesmoke;
   padding-left: 10%;
   padding-right: 10%;
 }

введите здесь описание изображения

person M.Laida    schedule 08.10.2019