Heim > Web-Frontend > CSS-Tutorial > Ursachen und Lösungen für den Ausfall von ie9 line-height

Ursachen und Lösungen für den Ausfall von ie9 line-height

yulia
Freigeben: 2018-09-12 17:16:34
Original
2652 Leute haben es durchsucht

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

转换为Unicode编码后

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

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

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

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

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

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

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

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

实际应用exp:

.div{ font-family:"微软雅黑"}
Nach dem Login kopieren
Nach dem Login kopieren

转换为英文名后

.div{ font-family:"Microsoft YaHei"}
Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt vonUrsachen und Lösungen für den Ausfall von ie9 line-height. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage