JQuery/CSS: строка-высота "normal" ==? px

Ответ 1

Согласно этой странице, похоже, что большинство последних браузеров используют одно и то же значение для line-height: normal: 1.14, id est font-size свойство с коэффициентом 1,14.

Пробовал несколько браузеров (в Windows XP):

• Chrome 21.0.1180.75
• Firefox 14.0.1
• Safari 5.1.7
• Opera 11.64
• IE 7
• IE 8

ИЗМЕНИТЬ

Я ошибся, line-height зависит от font-family, font-size, вашего браузера, возможно, вашей ОС...

Подробнее читайте на веб-сайт Эрика Майерса.

Ответ 2

normal является допустимым параметром для line-height, поэтому на самом деле нет пути для браузеров, которые вернут это.

В качестве альтернативы вы можете использовать .css('height'), поскольку он будет считать только внутреннюю часть элемента, а не padding/border/margin. Это потребовало бы немного творчества, если бы у вас был многострочный элемент или элемент с не только текстом в нем.

http://jsfiddle.net/xVBfb/

Изменить: Пример работы вокруг будет иметь

<span id='def' style='line-height:inherit;display:none;'>&nbsp;</span>

внутри элемента, то для поиска высоты строки вы можете просто использовать .height() для #def, поскольку она всегда будет только одной строкой и, следовательно, высотой строки родительского элемента.

Chrome в Windows XP является примером браузера, который возвращает normal в этом jsfiddle, если явно не указано иное. Firefox возвращает количество пикселей. normal - начальное значение для спецификации w3. http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

Ответ 3

Нормальный на самом деле называется abnormal на несколько экземпляров, поскольку существует некорректность браузера.

Объявление строки-высоты: нормальное не только варьироваться от браузера до браузера, который я ожидал - фактически, количественно эти различия были но они также варьируются от одного шрифта лицом к другому, а также внутри данного лица.

Ответ 4

Точно вычислять нормальную высоту линии в пикселе сложно. Хотя, согласно MDN, это примерно 1.2em.

Если у вас есть:

body{
  font-size: 16px;
}

Итак, ваш сайт имеет нормальный размер шрифта как 16px, тогда нормальная высота линии будет примерно 24px. Это означает, что вы можете рассчитать нормальное значение размера шрифта, умноженное на 1.5, которое равно 16px * 1.5 == 24px

Примечание. Я не умножился на 1,2, потому что разница между значениями px и значением em.

Ответ 5

Однако это было написано давно, но помогло мне написать временное решение в моей задаче. Я копирую этот код, чем другие люди могут его использовать.

$('#lineHeightInc')
.click(function() {
    var box = GetSelectedBox();
    var ct = box.data('LineHeight');
    if (isNaN(ct))
        ct = 0;
    ct++;
    box.css('line-height', (parseFloat(box.css('font-size')) * 1.61 + ct) + 'px');
    box.data('LineHeight', ct);
});

$('#lineHeightDic')
.click(function () {
    var box = GetSelectedBox();
    var ct = box.data('LineHeight');
    if (isNaN(ct))
        ct = 0;
    ct--;
    box.css('line-height', (parseFloat(box.css('font-size')) * 1.61 + ct) + 'px');
    box.data('LineHeight', ct);
});