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

Question

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

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

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

Answer 1

看起来 IE 和其他浏览器以 line-height > text-size 呈现文本的方式有所不同。

尝试设置 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;
  }