问题：

Question

我想将4px添加到当前＆＃34;正常＆＃34;使用CSS calc（）的元素的行高。不幸的是，＆＃34;正常＆＃34;不是calc（）识别的值，但它是line-height的默认值（例如line-height：normal）。因此，以下方法不起作用：

*.mystyle{
line-height: calc(normal + 4px);
}

如何将4px添加到＆＃34;普通＆＃34;元素的行高？

最后，虽然标题几乎相同，但这并不是Fragment life cycle的重复，因为那里接受的答案与OP想要做的事情无关。

Answer 1

问题：

你不能单独使用CSS。看看这段摘录from the MDN：

形式语法

<强> calc( <calc-sum> )

where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ] *

where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ] *

where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

值必须为数字，维度或百分比。

解决方案：

_{^{（虽然我意识到JavaScript并没有特别要求，但我不想让这个答案没有真正的解决方案。）}}

另一种方法是使用jQuery。

棘手的部分是计算CSS normal行高表示的内容。

我们可以通过记录内容的高度，为其添加一条线并记录 new 高度来实现这一点 - 这两个数字之间的差异是{{1}中的实际行高}}

＆＃13;

px

＆＃13;

$(".mystyle").each(function() {
    $t = $(this);
    var $clone = $t.clone();
    $t.parent().append($clone);             //Clone the element

    var initialHeight = $clone.height();    //Get its height
    $clone.append("<br><br>");              //Add a line
    var newHeight = $clone.height();        //Get new height
    var lh = newHeight - initialHeight;     //Difference them to calc line-height in px

    $clone.remove();                        //Clean up

    $t.css("line-height", lh+4+"px");       //Set the new line-height
});

＆＃13;

Answer 2

对于在所有理解 em ...

概念的浏览器中的7行文本区域

textarea {
    line-height: 1.5em;
    height: calc((1.5em * 7) + 4px); 
    /* there seems to be a small amount of internal padding: this compensates. */
}

<textarea></textarea>

Answer 3

测试了这一点，这是你的答案：

*.mystyle {
  line-height: calc(100% + 4px);
}

Answer 4

正常意味着100％的行高，所以你可以试试 line-height: calc(100% + 4px);

CSS calc（） - 将4px添加到＆＃34;正常＆＃34;行高

4 个答案:

问题：

形式语法

解决方案：