Question

我想要normal行高，加上4px。我试过了

line-height: normal + 4px;

但这不起作用。

（注意：我不希望使用百分比进行近似。）

Answer 1

为什么不带走Chromes的小焦点眩光？

使用css属性outline: none;

http://jsfiddle.net/XF6fS/

Answer 2

你不能在CSS中做任何算术。像LESSCSS这样的库允许你做某些事情，但你无法获得渲染元素的属性。

您可以使用百分比来获得近似值，但是您应该为元素设置明确的line-height;这将是相同的浏览器。

正在运行this JSFiddle会显示以下结果：

FireFox 6：20px
IE 8：normal
Chrome 13：normal

设定明确的高度;它将与所有浏览器更好地兼容。

Answer 3

没有直接的方法可以做到这一点。如上所述，您无法在CSS文件中进行任何计算。这就是为什么我们一直说CSS不完整，我们必须让float正确显示我们的页面，这在你想到它时是无稽之谈。

在创建css后，您可以自己添加4pt。如果您不想硬编码，可以使用CSS框架或其他创建CSS输出的语言。框架很好，但我不建议使用其他语言为您创建CSS输出。这很有趣，但您不会学习该语言，因为CSS是一种难以理解的语言，如果您的页面上有任何错误，错位，您就会陷入困境。

因此，关于您的问题，您可以javascript使用getComputedStyle并添加4pt并设置元素的样式。

这是获得风格的JavaScript：

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

用法：

var height = parseInt(getStyle("elementId", "line-height"));
var earlycss = document.getElementById("elementId").style.cssText
document.getElementById("elementId").style.cssText = earlycss + "\nline-height: " + (height + 4) + "px;";

Answer 4

尝试 -

line-height: -moz-calc(normal + 4px);

但是，由于跨浏览器问题，这不是一个理想的解决方案，而旧的浏览器也不会理想地支持这一点。 :)。有待进一步参考 - http://www.w3.org/TR/css3-values/#functional-notation

Answer 5

我非常肯定你不能用css那样做数学尝试使用一些javascript来获取行高，然后添加4

Answer 6

您可以尝试以百分比形式使用行高。例如：行高：110％，如果你想纯粹用CSS做

Answer 7

您可以尝试使用em来定义行高，然后假设您知道字体的大小，可以确保它是+'x'％

问题当然是90％的时间你无法知道字体的大小（或者更确切地说有人不会弄乱它）。

line-height属性：normal + 4px

7 个答案:

用法：