关于火狐浏览器字大小等于行高时,字体溢出

火狐版本 firefox quantum 67.0(64 位)

问题:在火狐浏览器中,height=font-size=line-height时,同样汉字,同样css设置,有的汉字会出现溢出,在设置溢出隐藏的情况下,会使汉字显示不全。通过实验,找到三个解决方法,个人推荐第三种方法,因为第四种方法是产生差异的原因。

第一种:既然设置溢出隐藏会使汉字显示不全,那就取消溢出隐藏,但是这样在内容不确定的情况下,会扰乱最初的设计想法。使工作复杂化

第二种:改变height和line-height高度,让高度大于字体大小,这样字体也能完全显示。(个人感觉这样背离最初设定好的设计方法,虽然不会像第一种方法那样变动很大,但是也增加一些工作量)

第三种:设置盒子模型为line-block,这样也可以使文字完全显示。但是要考虑内容的排版,毕竟这个是行内元素

第四种:以上三种只是为了把文字完全显示出来,但是没有从根本上解决兼容不同浏览器的需求,因为溢出肯定会产生错位,肯定带来不同的显示效果。那么现在我们就说说产生差异的原因,我通过删减正常和非正常页面的元素,删除没用css样式和元素,终于发现产生差异的原因,其原因就是在html标签上用了不同的lang属性,其

这种写法,会使中文字在这个版本的火狐浏览器产生溢出,而

中文则显示正常,不会产生溢出。原来从来没注意过这个标签,没想到会产生溢出这样的问题。

你可能感兴趣的:(关于火狐浏览器字大小等于行高时,字体溢出)