Firefox中Drop Caps高度异常，如何适配Chrome首字下沉渲染效果？

我的网站在Chrome浏览器中显示正常，但在Firefox中测试时发现首字下沉（Drop Caps）的位置过高。

Chrome显示效果：

Firefox显示效果：

当前使用的CSS代码：

column:first-of-type p:first-of-type:first-letter{/* Drop Caps */
    font-size: 3.4em;
    margin: 0 0 -0.1em 0;
    padding: 0 0 0 .75em;
    line-height: 1em;
    float: left;
}

请问如何仅针对Firefox调整，降低首字下沉高度，使其渲染效果接近Chrome？我不在意其他差异，仅希望Firefox中的黑色字母位置稍低。

可以通过以下几种方式仅针对Firefox调整首字下沉的位置：

• 方法一：使用标准特性检测@supports
  利用只有Firefox支持的-moz-appearance:none特性，给首字添加向下偏移的样式，这是更标准的写法：

/* 基础首字下沉样式 */
column:first-of-type p:first-of-type:first-letter{/* Drop Caps */
    font-size: 3.4em;
    margin: 0 0 -0.1em 0;
    padding: 0 0 0 .75em;
    line-height: 1em;
    float: left;
}

/* 仅Firefox生效的调整 */
@supports (-moz-appearance:none) {
    column:first-of-type p:first-of-type:first-letter {
        /* 调整margin-bottom让字母下移，数值可根据实际效果微调 */
        margin-bottom: -0.2em;
        /* 也可以用transform实现偏移：transform: translateY(0.1em); */
    }
}

• 方法二：使用Firefox专属CSS Hack
  如果需要更直接的方式，可以用针对Firefox的选择器hack（注意这种方式属于非标准写法，优先级低于@supports）：

/* 基础首字下沉样式 */
column:first-of-type p:first-of-type:first-letter{/* Drop Caps */
    font-size: 3.4em;
    margin: 0 0 -0.1em 0;
    padding: 0 0 0 .75em;
    line-height: 1em;
    float: left;
}

/* 仅Firefox生效 */
_:-moz-tree-row(hover), column:first-of-type p:first-of-type:first-letter {
    margin-bottom: -0.2em;
}

你可以根据实际显示效果微调margin-bottom或者transform的数值，直到Firefox中的首字位置与Chrome对齐即可。

内容的提问来源于stack exchange，提问作者Sam