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

在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.111cn.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"}

时间: 2024-09-24 00:38:39

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

css 文字垂直居中实现方法总结

实际上,一个Box中由很多行很多元素组成,vertical-align只作用于在同一行内的元素,它的垂直并不是相对于整个Box而言的.前面定义了一个60px的高度,但是这个Box中存在很多行,那段文本并不能对齐到中央.因此希望那段文本对齐中间,需要给它定义一个line-height的属性,让line-height为60px,作用于一行的vertical-align就可以工作了.   如果是单行文字想垂直居中,只要保证div高和行高保持一致,就可以了.用下面的代码即可实现:  代码如下 复制代码

div设计中的文字垂直居中的方法

CSS中怎样设置才能使对象中的文字垂直居中于对象,这个问题也是捆扰很多朋友的难题.现在网上的很多代码都做不到浏览器兼容.我把网上有关的方法整理了一下,做了些改动,完全可以兼容各主流浏览器. 下面具体说一下在不同情况下垂直居中的方法. 一.一行文字垂直居中 看一下下面的代码: Code Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

用CSS实现文字垂直居中的代码

用CSS实现文字垂直居中的代码 <style type="text/css"><!--.con_div{width:400px;height:300px;border:1px solid #777;text-align:center;display:table-cell;vertical-align:middle;background:red;color:#fff}/*FOR IE*/.webjx{width:0;height:100%;display:inline-

小技巧:用CSS如何实现单行图片与文字垂直居中

css|技巧 今天又在群中看到一些朋友问单行图片文字垂直居中问题了,于是写了这篇文章. 这个问题是在做页面中经常会遇到的问题,首行我们先看一下最基础的的吧! 以下选自(CSS权威指南) vertical-align初始值: baseline(缺省值)可否继承:否适用于: 内联元素说明:vertical-align:baseline使元素的基线同父元素的基线对齐.警告:vertical-align不能影响表格单元中的内容的对齐,对于块元素中的内容也一样. 文字不多,但时常有人范错误,有人说我用了为

CSS实现同一行的图片和文字垂直居中对齐的方法

 本文实例讲述了CSS实现同一行的图片和文字垂直居中对齐的方法.分享给大家供大家参考.具体分析如下: 有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于垂直居中呢,很简单,就是在图片和文字所在的行中添加CSS属性:vertical-align:middle;这样,它们在同一行就会垂直居中对齐了. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

css中fieldset legend中间的文字怎么会默认显示蓝色

问题描述 css中fieldsetlegend中间的文字怎么会默认显示蓝色 解决方案 解决方案二:在fieldset外面放一个容器改变颜色试试,然后在fieldset内部放一个容器,再把颜色改回来,试试解决方案三:除非你定义了,否则是不会显示蓝色的解决方案四:样式分为默认样式,自定义样式,继承样式你这种情况就是浏览器的默认样式.这个行为就像为什么一个超链接在IE下有下划线和蓝色一样.因为w3c标准只是定义a元素的行为(点击可以进行另一个页面),但是标准并没有规定a元素在浏览器中一定要显示成斜体一

为什么div中直接设置width,height,color没有效果?一定要通过css的样式来设置吗?

问题描述 为什么div中直接设置width,height,color没有效果?一定要通过css的样式来设置吗? 像如下的样子设置div并没有效果. 但是如果是这样设置就有效果 #testdiv{ width:100; height:100; color:blue; } 是因为div只能通过css的样式来设置吗? 解决方案 用JS设置div的width,height(精华版) 解决方案二: div中你是怎么设置 的?发上来看看吧! 解决方案三: div 元素好像只支持align 属性 解决方案四:

css实现文字垂直居中的代码第1/2页_经验交流

三行文字垂直居中,设置相同的内上边距padding-top和内下边距padding-bottom就可以. 三行文字垂直居中两行文字垂直居中一行文字垂直居中

关于文字垂直居中(待续)

很多时候布局中需要文字垂直居中,有个CSS属性:vertical-align: middle;该属性在table里用是有效果的,很多块级元素没反应. 这里有2个属性可以模拟table,来让vertical-align: middle属性生效. display: table和display: table-cell; 很简单父级元素给固定宽高加上属性display: table,子级元素给属性display: table-cell和vertical-align: middle此时子集元素的文字自然垂