jQuery：如何使 css('line-height') 跨浏览器工作答案

【问题标题】：jQuery: how to make css('line-height') work cross-browserjQuery：如何使 css('line-height') 跨浏览器工作
【发布时间】：2013-05-11 22:17:54
【问题描述】：

我支持 IE8 及更高版本。

$(something).css('line-height');

在 Chrome 中返回 32px，但在 IE8 中返回 normal

我该如何解决这个问题？也许是原生 javascript 变体？

【问题讨论】：

你可以在css上设置line-height:32px
你读过这个吗：stackoverflow.com/questions/3614323/…？
添加一些元素并检索其 clientHeight 即使在 IE 上也会给出一些“px”

标签： javascript jquery css internet-explorer-8 cross-browser

【解决方案1】：

似乎这是一个 webkit 与 IE 的问题。不确定 FF，但有几个选项可以解决它。公开指定像素值将起作用。但我不喜欢这样做，因为如果你用媒体查询缩放文本等，就很难保持比例。我能够通过在ems 中公开指定行高（而不是让它继承）来使其工作。同样相关的是它之前设置为 IE8 无法识别的 rems。

【讨论】：

【解决方案2】：

    function lineHeight(element){
       var tmp=$("<div>test</div>");
       element.append(tmp);
       tmp.css({"padding":"0","margin":"0","border":"0"});
       var height = tmp[0].clientHeight;
       tmp.remove();
       return height;
    }

jsfiddle 在 FF 和 Chrome 中返回 20px，但在 IE8 上返回 18px

【讨论】：