HTML – 有没有CSS文本重置？

发布时间：2020-12-14 16:37:12 所属栏目：资源来源：网络整理

导读：你好,我有这个问题：正如你可以看到左侧有一个截图,它是如何在chrome,右侧firefox.文字高度不一样. html的结构很简单.它只是一个div,其中是一个字段集,其中放置了一个h1标签.周围有1px的边框. h1标签的高度为20px,甚至行高为20px. next是一个大小相同的h2标

你好,我有这个问题：

正如你可以看到左侧有一个截图,它是如何在chrome,右侧firefox.文字高度不一样. html的结构很简单.它只是一个div,其中是一个字段集,其中放置了一个h1标签.周围有1px的边框. h1标签的高度为20px,甚至行高为20px. next是一个大小相同的h2标签.问题是文字高度.

在firefox中,它似乎比chrome和safari低1px.

我在其最新版本中使用了eric meyers的css reset.所以它不应该由此造成.

如果有人提示帮助我,那就太好了.

非常感谢.

解决方法

默认行高在不同浏览器中以及不同字体大小的不同字体系列中有很大差异.设置显式的行高地址.

这是由于浏览器处理子像素文本定位的方式不同.如果您的行高为20像素但字体大小为15像素,则文本需要距离行顶部2.5像素. Gecko实际上是这样做的,而WebKit只是将位置四舍五入为整数像素.在某些情况下,这两种方法给出的答案相差一个像素.

在任何情况下,确保你的半前导是一个整数(即行高减去font-size是偶数)将使渲染更加一致,如果你真的需要它.

试试这个：

div h1 {
  -webkit-padding-before: 1px;
}

另一种可能的方案

@media screen and (-webkit-min-device-pixel-ratio:0) {
    div h1 {
        line-height:19px;
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!