• 技术文章 >web前端 >css教程

    ie9 line-height失效的原因及问题解决方法

    yuliayulia2018-09-12 17:16:34原创1358
    在处理浏览器兼容性问题时,你有没有发现在IE9中浏览DIV CSS网页文字字体偏上方,设置文字垂直上下居中line-height样式失效,而其它浏览器包括ie6-ie8均正常,究竟什么原因造成,如何解决与避免在ie9浏览器line-height失效。

    一、ie9 line-height失效原因

    CSS中使用了中文字体,而中文字体使用汉字。如:

    font-family:"微软雅黑"。使用CSS字体font-family样式使用了“宋体”、“黑体”或“微软雅黑”等中文字体以汉字设置于CSS中。

    在网页DIV+CSS布局中不可避免使用中文字体如:黑体、宋体、微软雅黑等中文字体,如何正确使用这些中文字体样式呢?接下来我们来了解如何解决使用这些中文字体,又兼容IE9,支持IE9使用汉字字体。

    二、解决ie9字体不垂直居中方法

    1、将中文字体汉字转换为Unicode编码

    “黑体”对应Unicode编码为“\9ED1\4F53”

    “宋体”对应Unicode编码为“\5B8B\4F53”

    “仿宋”对应Unicode编码为“\4EFF\5B8B”

    “微软雅黑”对应Unicode编码为“\5FAE\8F6F\96C5\9ED1”

    将汉字转换为Unicode编码的字符,即成功设置相应字体,又兼容IE9浏览器支持垂直居中line-height样式。

    实际应用exp:

    .div{ font-family:"微软雅黑"}

    转换为Unicode编码后

    .div{ font-family:"\5FAE\8F6F\96C5\9ED1"}

    汉字字体中文字转换为Unicode编码后字体效果相同,不受影响,兼容各大浏览器。

    2、将中文字体汉字使用英文名

    将CSS+DIV布局中CSS设置中文字体汉字转换对应英文名字体,转换后设置中文字体效果不变,并兼容各大浏览器。

    “黑体”对应英文名为“SimHei”

    “宋体”对应英文名为“SimSun”

    “仿宋”对应英文名为“FangSong”

    “微软雅黑”对应英文名为“Microsoft YaHei”

    实际应用exp:

    .div{ font-family:"微软雅黑"}

    转换为英文名后

    .div{ font-family:"Microsoft YaHei"}

    将div css布局中css字体使用汉字字体转换为英文名的字体,其设置字体效果不变不受影响,并兼容各大浏览器,大家可以放心使用。

    以上就是ie9 line-height失效的原因及问题解决方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:ie9 ,line-height
    上一篇:深入理解CSS盒子模型含义和原理 下一篇:如何使用CSS和GSAP实现有多个关键帧的连续动画(附源码)
    千万级数据并发解决方案

    相关文章推荐

    • IE9对HTML5中部分属性不支持的原因分析_html5教程技巧• 让IE9以下版本的浏览器兼容HTML5的方法_html5教程技巧• IE9下html5初试小刀 _html5教程技巧• IE9beta版本浏览器对HTML5/CSS3的支持_HTML/Xhtml_网页制作
    1/1

    PHP中文网