Question

以下元素：

<span>Test</span>

span {
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
}

Chrome的高度为19px，Firefox的高度为21px（fiddle）。我尝试应用各种CSS重置/规范化，高度仍然不同。文本本身的渲染方式相同，但元素高度偏离2个像素，这会破坏我的布局。

如何在不使用（内联）块元素的情况下修复它？

Answer 1

使用此：

public class ButtonModel implements javax.swing.ButtonModel {
    protected boolean state;

    public ButtonModel(boolean state)
    {
        this.state = state;
    }

    @Override
    public boolean isSelected() {
        return state;
    }

    @Override
    public boolean isEnabled() {
        return true;
    }

    // other methods of ButtonModel-interface
    [...]
}

不同之处在于浏览器中不同的字体呈现方式。

Answer 2

这是一个众所周知的问题。这是因为Firefox和Chrome分别使用不同的渲染引擎Gecko和Webkit。不幸的是，没有“最好的”方法来修复它。

您可以在this answer和this one找到一些解决方法。

Answer 3

由于span是内联元素，您应该按照以下方式重写代码：

＆＃13;

document.querySelectorAll("span").forEach(el => {
  el.textContent = el.offsetHeight + "px";
});

＆＃13;

span {
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
  display: inline-block; /* Key line */
  vertical-align: top; /* It is recommended when using "display: inline-block"*/
}

＆＃13;

<span>Test</span>

＆＃13;

Answer 4

关于高度差异，问题在于您还添加了字体大小，族和行高。

因此有三件事：

font-family: Verdana;
font-weight: bold;
line-height: 1.15;

你的文字大小会比16px更大。

Answer 5

这种行为的原因是您使用的是span，它是一个内联元素。它不会根据行高更改其容器高度，而是基于其父块元素。显然，Chrome和Firefox有不同的默认样式。

使用span制作display: block块元素，或将其替换为div等块元素。

Firefox与Chrome

5 个答案: