html - 如何查看 HTML 元素的基线？

Question

每个浏览器的开发工具都会向您显示元素的内容、填充、边框和边距框。有没有办法让浏览器(任何浏览器)向我显示元素的基线？这对调试内联框对齐有很大帮助。

Answer 1

这不会完全回答您的问题，但我希望它至少可以一些用途...或者它甚至可以激励其他人想出更好的方法!

诀窍是 a) 计算基线的位置，以及 b) 使该信息可用于所有元素。

计算基线的方法出乎意料的不直接:我们必须创建两个元素，其中一个的字体大小为 0，然后计算它们之间的顶部位置差。
为了将此计算放入所有 HTML 元素中，我们使用 defineProperty 方法将新属性添加到 HTMLElement 类的原型(prototype)中。

// the main functionality
Object.defineProperty(Element.prototype, 'baselinePosition', 
{
  get: function() {
    var fs0 = document.createElement('span');
    fs0.appendChild(document.createTextNode('X')); fs0.style.fontSize = '0'; fs0.style.visibility = 'hidden';
    var fs1 = document.createElement('span');
    fs1.appendChild(document.createTextNode('X'));
    this.appendChild(fs1); this.appendChild(fs0);
    var result = fs0.getBoundingClientRect().top - fs1.getBoundingClientRect().top;
    this.removeChild(fs0); this.removeChild(fs1);
    return result;
  },
  enumerable: true
});

// and a test run.
var pos = document.getElementById('test').baselinePosition;
console.log('The baseline is at ' + pos + ' px.');

<p id="test">This is the test.</p>

这里需要注意的是，您需要一个可以显示 HTML 元素节点所有属性的浏览器。到目前为止，我发现唯一能做到这一点的是 SeaMonkey 的 DOM Inspector。

其他浏览器要么没有显示 JavaScript 节点属性的能力，要么只显示内置的，而不显示用户添加的。

无论如何，希望这对您有所帮助!