Как сделать одинаковую высоту блоков в Chrome и Firefox?

Question

[Посторонним В.]

Очень странная и неприятная проблема: мне банально нужен блок, который будет содержать 16 строк со шрифтом в 15 пикселей и шириной строки в 1.5em.

Прописал:

<div class="post-preview_main__content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, necessitatibus, quidem in beatae quae quo perspiciatis nihil adipisci aut fuga ad possimus illo nisi vitae libero debitis accusantium magni esse. ipsum dolor sit amet, consectetur adipisicing elit. Culpa, natus, deleniti tenetur quos hic voluptate itaque nobis</p>

                        <p>cum magni magnam ipsa enim a labore maxime repellendus eaque exercitationem nihil doloribus! ipsum dolor sit amet, consectetur adipisicing elit. Quidem, aliquam voluptate atque ipsa eveniet tempore sed cumque non magnam accusamus enim consectetur fuga fugiat ducimus dolorum temporibus dolor facilis doloribus. ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quisquam, vel dignissimos natus porro veniam velit quia odit quam dolorum reprehenderit vero eos modi non ea voluptate eligendi consectetur officia.</p>

                        <p> cum magni magnam ipsa enim a labore maxime repellendus eaque exercitationem nihil doloribus! ipsum dolor sit amet, consectetur adipisicing elit. Quidem, aliquam voluptate atque ipsa eveniet tempore sed cumque non magnam accusamus enim consectetur fuga fugiat ducimus dolorum temporibus dolor facilis doloribus. ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quisquam, vel dignissimos natus porro veniam velit quia odit quam dolorum reprehenderit vero eos modi non ea voluptate eligendi consectetur officia.</p>

                        <p>cum magni magnam ipsa enim a labore maxime repellendus eaque exercitationem nihil doloribus! ipsum dolor sit amet, consectetur adipisicing elit. Quidem, aliquam voluptate atque ipsa eveniet tempore sed cumque non magnam accusamus enim consectetur fuga fugiat ducimus dolorum temporibus dolor facilis doloribus. ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quisquam, vel dignissimos natus porro veniam velit quia odit quam dolorum reprehenderit vero eos modi non ea voluptate eligendi consectetur officia.</p>

                        <p>cum magni magnam ipsa enim a labore maxime repellendus eaque exercitationem nihil doloribus! ipsum dolor sit amet, consectetur adipisicing elit. Quidem, aliquam voluptate atque ipsa eveniet tempore sed cumque non magnam accusamus enim consectetur fuga fugiat ducimus dolorum temporibus dolor facilis doloribus. ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quisquam, vel dignissimos natus porro veniam velit quia odit quam dolorum reprehenderit vero eos modi non ea voluptate eligendi consectetur officia.</p>
                </div>

.post-preview_main__content {
  box-sizing: border-box;
  font-size: 15px;
  height: 24em; /* 1.5 x 16 */
  line-height: 1.5em;
  width: 420px;
  overflow:hidden
}

p {
margin: 0;
padding: 0;
}

https://jsfiddle.net/6oqn7535/3/

В FF всё выглядит отлично - блок с 16-ю строками. Webkit браузеры же какого-то лешего отображают ещё кусок 17-й строки.



Как это исправить?

Comments

[Ankhena]

Потому что line-height: 1.5em это 22.5px.
Сделайте целым числом.

[Посторонним В.]

Ankhena, эм. И как же сделать целым числом, если размер шрифта меняется при масштабировании в браузере?

[Ankhena]

Посторонним В., не знаю, в вопросе ничего нет про динамический размер, там вы четко написали

нужен блок, который будет содержать 16 строк со шрифтом в 15 пикселей и шириной строки в 1.5em.

*потому что надоело*

Например, считать на JS. Или посмотреть на проблему с другой стороны.

[Посторонним В.]

Ankhena, почему-то у Firefox и даже у Майкрософтовского Edge всё хорошо с расчетами, и при любом масштабе строки не режутся. Лезть ради такой простой задачи в JS - это оверкил и костыли. Печальны дела с Webkit, выходит.

[Ankhena]

Посторонним В., Не злите меня.
Браузеру надо куда-то деть половину точки. Он может округлить в большую сторону, может в меньшую или еще как-то пытаться интерпретировать ваши нечеткие инструкции.
Что из этого хорошо, а что плохо?

[Посторонним В.]

Ankhena, не надо округлять значения при каждом промежуточном расчете - вот, в чем соль. FF сохраняет эти половинки в значениях высоты строк, и в конце их суммирует, получая адекватное значение высоты родительского элемента. А что до самих строк - в метрологии используется приём, когда половина разряда округляется то в большую, то в меньшую сторону, что минимизирует ошибку на выходе. Тут вопрос грамотности расчетов, разрабы Webkit просто схалтурили.

[Ankhena]

Посторонним В., хорошо

Answer 1

[Посторонним В.]

Как оказалось, Webkit плохо справляется с дробными значениями. В моём случае высота строки вышла 15*1.5 = 22.5 пикселей , и Webkit округляет это значение до 22, делая каждую строку меньше предполагаемого размера, что в итоге выливается в изменение предполагаемой высоты блока на 16*0.5 = 8 пикселей. У Firefox и Edge расчеты выполняются более грамотно.
Адекватного решения проблемы (на CSS) я не нашел, т. к. нужно, чтобы высота блока была равной 16-ти строкам при любом размере шрифта и масштабе. С JavaScript тоже всё сложно - он не обрабатывает событие изменения масштаба в браузере.