Question

我正在构建一页文字，紧紧贴在一张纸上。由于某些未知原因，Edge将所有内容都渲染得更大。我正在使用边框，空边距和填充。我尝试过CSS重置但结果是一样的。

在附带的示例中，H1元素在Chrome中为57.03x25px，在Edge中为64.7x25.35px。 Chrome在Chrome中为57.031x16px，在Edge中为64.7x16.09px。我认为Chrome是正确的，因为我专门设置了分别为25px和16px的字体大小。

所有这些小的子像素错误都会逐渐增加，直到我在一页文本后出现相当大的差异。宽度增加并不会让我感到烦恼，但我认为它是相关的。

我找不到任何其他选项或余地来重置，所以我假设Edge / IE以某种方式添加了未记录的空白区域。

编辑：Firefox还为25px的字体呈现更大的27px文本高度。

https://jsfiddle.net/m74b0s09/

<style>
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #FAFAFA;
    /*font: 12pt "Tahoma";*/
    font: 10.66px "Tahoma"; /* IE/Edge does not render as Chrome with pt units, seems to ignore sub-pixel sizes */
    z-index: 0;
  }

  * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }

  .section {
    margin-top: 0;
    z-index: 0;
  }

  .section h1 {
    border-bottom: 1px solid;
    margin-top: 8px;
    margin-bottom: 3px;
  }

  h1 {
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
  }

  h2 {
    margin: 0;
    font-size: 10pt;
  }

  h3 {
    margin: 0;
    font-size: 9pt;
  }

  body {
    font: 10.66px "Tahoma";
    background-color: #fff;
  }

  a {
    text-decoration: none;
  }

  .header {
    margin-top: 0;
  }

  .header h1 {
    border: none;
    text-transform: none;
    font-variant: small-caps;
    font-size: 21px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
  }

  .header .name {
    display: inline-block;
  }

  .header .contact {
    float: right;
    text-align: right;
    display: inline-block;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-variant: small-caps;
  }

</style>

<body>
<div class="section header">
  <div class="name">
    <h1>Lorem</h1>

    <h2>Ipsum</h2>

  </div>
  <div class="contact">
    <h3>
      H3 text
    </h3>

    <h3>more H3</h3>

    <h3>even more H3</h3>
  </div>
</div>

</body>

Answer 1

尝试使用CSS Normalize这是一组CSS规则，使主浏览器更加一致地呈现所有元素并符合现代标准。

边缘与Webkit与Firefox的CSS字体渲染（盒子模型大小）不同

1 个答案: