IE9中CSS line-height的文字垂直居中无效

作者:袖梨 2022-06-25

在IE9常常会遇到写的DIV+CSS网页,文字有时不能垂直居中使用line-height根本无效,即使可以设置IE浏览器的兼容模式,但对于访客而言不可能每个人都会去设置兼容模式浏览,只能算是掩耳盗铃的解决办法,怎么办呢?只好搜索了,百度了一下才找到原因,原来IE9不支持line-height的原因是中文ie9不支持英文字体,而我刚好使用的是英文字体。

在IE9看见自己使用line-height设置垂直居中文字不能垂直居中,这是与你设置字体有关,通常大家习惯设置

 代码如下 复制代码

font-family:Arial, Helvetica, sans-serif;

ie9中line-height失效解决方法:

只需设置好字体,添加个宋体即可解决 如CSS代码

 代码如下 复制代码

font-family:Arial, "宋体",Helvetica, sans-serif;

设置字体时候注意,还需设置大家都默认系统自带字体,如黑体,宋体。

在中文IE9中不认英文字体,所以IE9找不到设置中文字体,所以对导致字体上下垂直失效。


如果在CSS中一定只使用中文字体时如何办,我们可以将中文字体名称转换为Unicode编码。

Unicode编码转换示范:

宋体:5B8B4F53
黑体:9ED14F53
微软雅黑:5FAE8F6F96C59ED1

大家可以记住保存以上网址,以便开发CSS时候将中文转换Unicode做参考。

如下:

 代码如下 复制代码

div{font-family:"宋体";}

转后:www.111com.net

div{font-family:"5B8B4F53";}

设置字体时候注意,还需设置大家都默认系统自带字体,如黑体,宋体。

在中文IE9中不认英文字体,所以IE9找不到设置中文字体,所以对导致字体上下垂直失效


例子A:将中文字体汉字转换为Unicode编码

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

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

如:

 代码如下 复制代码

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

转换为Unicode编码后

    .div{ font-family:"5FAE8F6F96C59ED1"}

  

例子B:将中文字体汉字使用英文名

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

如:

 代码如下 复制代码

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

转换为英文名后

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

相关文章

精彩推荐