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

火狐版本 firefox quantum 67.0(64 位)

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

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

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

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

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

<html  lang="zh-CN">

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

<html lang="en">

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,610评论 1 45
  • day01­_起源和结构 结构:Xhtml xml 表现:CSS 行为:DOM ECMAScript 以上都属于W...
    Sakura_明妃阅读 1,229评论 0 1
  • 001、浮动不上去的原因 1、宽度不够浮动不上去 2、前一个元素不浮动后一个元素加了浮动你也浮动不上去 3、都加了...
    JK酱阅读 846评论 0 1
  • 1. 默认的内外边距不同 问题: 各个浏览器默认的内外边距不同 解决: *{margin:0;padding:0;...
    jslxm阅读 847评论 0 2