Home > Web Front-end > CSS Tutorial > Causes and solutions to the failure of ie9 line-height

Causes and solutions to the failure of ie9 line-height

yulia
Release: 2018-09-12 17:16:34
Original
2685 people have browsed it

在处理浏览器兼容性问题时,你有没有发现在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:"微软雅黑"}
Copy after login
Copy after login

转换为Unicode编码后

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

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

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

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

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

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

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

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

实际应用exp:

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

转换为英文名后

.div{ font-family:"Microsoft YaHei"}
Copy after login

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

The above is the detailed content of Causes and solutions to the failure of ie9 line-height. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template