html - 如何跨浏览器标准化汉字的上边距

Question

我正在开发一个网站，其中包含用于学习汉字的抽认卡。问题是 IE 在线上呈现的字体比我测试过的其他浏览器略高。这通常没什么大不了的，但是对于抽认卡，字体太大以至于位置差异变得非常明显。

我在这里上传了一个虚拟版本的网页:http://mandaclu.com/dummy/flashcard.html .在 Firefox/Chrome 和 IE 中打开链接以查看不同之处(要查看具有相同问题的非常简单的页面，请使用此链接:http://mandaclu.com/dummy/test.html)。

我查看了所有内容，但没有找到任何方法让该 Angular 色位于页面上的同一位置，而不管浏览器如何。有人有什么想法吗？ (CSS 重置也不起作用)感谢您提供的任何帮助。

Answer 1

看起来 IE 和其他浏览器呈现行高 > 文本大小的文本的方式有所不同。

尝试设置 line-height = text-size 并添加顶部填充以强制文本向下。

例如。

#char {
    display: inline-block;
    font-size: 180px;
    line-height: 180px;
    margin: 0;
    padding: 30px 0 0 0;
    position: relative;
    vertical-align: bottom;
    width: 260px;
  }