如何计算文本基线

Question

我正在尝试编写一个测试来确定<input>内呈现的文本是否与标签具有相同的基线：

为了做到这一点，我想计算每个元素中呈现的文本的基线并比较这两个值。这是可能的，如果是这样，它是如何完成的？如果没有，是否有更好的方法来确定两个元素的基线是否相同？

我找到了一种方法来确定标签的基线，它似乎可靠地起作用：

function getBaseline(element) {
    var span = document.createElement("span");
    span.setAttribute("style", "font-size:0");
    span.innerText = "A";
    jQuery(element).prepend(span);
    return span.getBoundingClientRect().bottom;
}

但是，此方法不适用于<input>，因为在这种情况下我无法插入范围。

Answer 1

我找到了一种基于你的函数获得计算基线的方法。诀窍是创建一个包装器并将元素中的所有样式应用到它。我可以确认它在OSX上的Firefox（v38）和Chrome（v44）中有效。不幸的是，它在Safari中无法正常工作。

DEMO

function getBaseline(element) {
    element = jQuery(element);
    var span = document.createElement("span");
    span.setAttribute("style", "font-size:0");
    span.innerText = "A";

    var wrapper = document.createElement("span");
    applyCSSProperties.call(wrapper, element);
    element.wrap(wrapper);
    element.before(span);

    var computed = span.getBoundingClientRect().bottom;

    span.remove();
    element.unwrap(wrapper);

    return computed;
}

function applyCSSProperties(element) {
    var styles = {};
    var comp = getComputedStyle(element[0]);

    for(var i = 0; i < comp.length; i++){
        styles[comp[i]] = comp.getPropertyValue(comp[i]);
    }

    jQuery(this).css(styles);
}