在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:"宋体";} 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"} |