合买大神
网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

关于使用line-height单行文本的垂?#26412;?#20013;问题

日期:2013-11-29  来源:攀枝花惠康网络公司

在前端开发中经常用line-height界说行高和单行文本的垂?#26412;?#20013;,当然偶然也配合的做其他的垂?#26412;?#20013;。
对应的剧本特征为lineHeight。

语法:

先写个height、line-height都为25px,布景为红色的元素,设置文字为12px。然后量下,文字膳缦沔是6像素,文字下面是8像素。。同时增添或者削减height、line-height 1px发现如不美观当前值是奇数那1px会加到文字和底部空间里而削减时减失踪的是文字和顶部空间的1px(加下减上);为偶数时刚好相反:加上减下。当我们给文字加下划线的时辰发现文字的垂直位置并没变,这能声名什么呢?还不太必定,继续同时减小heighe、line-height直到一个合适的值:14px,这时辰我们可以看到文字和下划线都是完整的,继续减小1px。这时IE已经不按我们?#20160;?#21457;现的端方处事了,文字膳缦沔被截去1px,这样看来14px应该是IE认为的一个临界点,此时整体凹凸减去文字高度刚好为3px。会不会集。。。因为这时文字是顶这上鸿沟的,我?#21069;?#25991;字增添到2行,发现了吧,第二行的文字不是顶这第一行的下划线的,而是有1px的距离。3px不美观真是下划线的高度。


number 设置数字,此数字会与当前的字体尺?#32550;?#20056;来设置行间距。

line-height : normal | number | length | %

?#38382;?/p>

normal 默认。设置合理的行间距。

<div style="height:30px;line-height:30px;background:red;color:#FFFFFF;font-size:12px;">文字字</div>

length 设置固定的行间距。
% 基于捣?#35828;?#20307;尺寸的百?#30452;?#34892;间距。


先来看看根基的语法和属性值:

声名:

检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
如行内包含多个对象,则应用最年夜行高。此时行高不成为负值。

下面说?#22833;踪?#35828;说line-height单行文本的垂?#26412;?#20013;问题

方案2、加overflow:hidden:

其拭?#26085;?#37324;还有一点非凡的处所就是如不美观我们一路头把height、line-height都设为30px那这时2px会变为3px。这个可以用我们膳缦沔得出的“偶数情形加上减下的结论”诠释:heighe、line-height同为30px的时辰上下空白区域高度差是3px,然后height、line-height同时加1px(就是31px),这1px应该是加到上部空间里,所以3pxbug会酿成2pxbug。

IE6-IE8都有这个问题,firefox,Opera,Safari也都存在这个问题,
好比:

<div style="height:25px;line-height:25px;background:red;color:#FFFFFF;font-size:12px;">文字字</div>

————————————————————–

如图:2009-05-24_164111

文字膳缦沔是6像素,文字下面是8像素。(转载请注明出处:WEB前端开发 http://www.css88.com/)

<div style="height:25px;line-height:28px;background:red;color:#FFFFFF;font-size:12px; overflow:hidden">文字字</div>

再如:

ie下:文字膳缦沔是8像素,文字下面是11像素;firefox,Opera,Safari下:文字膳缦沔是9像素,文字下面是10像素;

算一下我们就可以知道,其实没带下划线的12px文字在显示的时辰都是11像素。
有2个相对解决方案;
方案1、加padding-top:(转载请注明出处:WEB前端开发 http://www.css88.com/)

<div style="height:22px;line-height:22px; padding-top:3px;background:red;color:#FFFFFF;font-size:12px;">文字字</div>

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网?#23621;?#21517;注册+网站服务器租用+网站开发+网站维护+网?#23621;?#38144;推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大?#34892;?#22478;市,我们高效优质的网站建设服务深受用户好评。

?#22836;?#28909;线:tel(谢先生)  ?#22836;Q:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
?#26102;啵?/span>617200

合买大神 连环锁子甲 鹿岛鹿角赛程 浙江风采20选5走势图 时时彩最长历史记录 天津市快乐10分开奖号码 皇家社会对贝蒂斯 快乐十分玩法与奖金 尼达维里尔 英雄联盟配置要求 勒沃库森 奥格斯堡