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

Question

Я звоню $("#foobar").css("line-height") и возвращаюсь "нормально".Как мне перевести это в количество пикселей?«Нормально» определено в спецификации CSS или это браузер?

Answer 1

Согласно этой странице , большинство современных браузеров используют одно и то же значение для line-height: normal: 1,14, то есть свойство 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, ваш браузер, может быть, ваша ОС ...

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

Answer 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

Answer 3

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

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

Answer 4

Точный расчет нормальной высоты строки в пикселях затруднен. Хотя, согласно MDN это примерно 1,2 млн.

Если вы:

body{
  font-size: 16px;
}

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

Примечание: я не умножил на 1.2, потому что есть разница между значением px и значением em.

Answer 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);
});