<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WEB前端开发 &#187; line-height</title>
	<atom:link href="http://www.css88.com/archives/tag/line-height/feed" rel="self" type="application/rss+xml" />
	<link>http://www.css88.com</link>
	<description>专注前端开发，关注用户体验</description>
	<lastBuildDate>Mon, 06 Feb 2012 13:31:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>line-height的继承问题</title>
		<link>http://www.css88.com/archives/1311</link>
		<comments>http://www.css88.com/archives/1311#comments</comments>
		<pubDate>Sun, 24 May 2009 12:00:57 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[line-height]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1311</guid>
		<description><![CDATA[关于使用line-height的基本语法和单行文本的垂直居中问题可以查看这里，原文地址： http://www.css88.com/archives/1304 line-height的属性值: normal 默认。设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 例如：line-height:1.5; length 设置固定的行间距。  例如：line-height:18px; %      基于当前字体尺寸的百分比行间距。 例如：line-height:150%; line-height是可以继承的，由于这个特性，子元素就可以不用重复定义line-height了,假设一段文字的line-height:200%;font-size:12px;那么行高应该是24px；而当装在这段文字的容器有子元素的时候，子元素会继承line-height:200%的属性。但是假设这个子元素的字体改变的时候，比如字体一下子到font-size:54px;的时候，比肯能回想到行高应该是108px（54*200%），其实错了。(转载请注明出处：WEB前端开发 http://www.css88.com/) 例如代码： &#60;div style=&#34; line-height:200%;font-size:12px;&#34;&#62; &#60;div&#62;::CODECOLORER_BLOCK_1::&#60;/div&#62; &#60;pre style=&#34;font-size:54px;&#34;&#62; line-height的继承问题 line-height的继承问题 line-height的继承问题&#60;/pre&#62;&#60;/div&#62; 我们看看截图： 有的时候，我们为了实现单行文字的垂直居中，会给line-height一个和height相同的固定的值；有的时候，我们为了调整特定的某段文字的行间距，通常会考虑使用百分比或者相对尺寸的em或者px。这些情况下，我们都不需要考虑line-height的继承，所以我们不会发现任何问题。(转载请注明出处：WEB前端开发 http://www.css88.com/) 那么我们在回去看line-height的属性值，normal ，length，%，3个在子元素的字体改变的时候都不能正常显示了，那么number呢，例如：line-height:1.5;此数字会与当前的字体尺寸相乘来设置行间距。 请看demo页面：http://www.css88.com/demo/line-height/line-height.html 看过例子后，你会发现，只要有单位或百分比的line-height继承，都发生了重叠的现象。那到底这是什么原因导致的呢？ 如果line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；而如果属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。(转载请注明出处：WEB前端开发 http://www.css88.com/) 这种情况碰到最多的博客，留言，论坛等地反，因为这些地方大多有设置字体大小的功能。 另外： 今天在测试的页面的时候还发现一个ie的bug，就是{line-height:150%;font-size:12px;}、{line-height:18px;font-size:12px;}、{line-height:1.5;fon-size:12px;}在页面呈现的时候居然高度不一样，{line-height:18px;font-size:12px;}、{line-height:1.5;fon-size:12px;}呈现的都是18px，而{line-height:150%;font-size:12px;}呈现的却是19px； 其他色数值，例如{line-height:24px;font-size:12px;}、{line-height:200%;font-size:12px;}、{line-height:2;font-size:12px;}又是相等的24px。这是搞不懂IE了。 请看demo页面：http://www.css88.com/demo/line-height/line-height2.html 郁闷的很，我不知道是什么原因，这也正是今天我彻底研究line-height的原因。 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《line-height的继承问题》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1311/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>关于使用line-height单行文本的垂直居中问题</title>
		<link>http://www.css88.com/archives/1304</link>
		<comments>http://www.css88.com/archives/1304#comments</comments>
		<pubDate>Sun, 24 May 2009 09:06:36 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[line-height]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1304</guid>
		<description><![CDATA[在前端开发中经常用line-height定义行高和单行文本的垂直居中，当然偶尔也配合的做其他的垂直居中。 先来看看基本的语法和属性值： 语法： line-height : normal &#124; number &#124; length &#124; % 参数： normal 默认。设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length 设置固定的行间距。 % 基于当前字体尺寸的百分比行间距。 说明： 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。 如行内包含多个对象，则应用最大行高。此时行高不可为负值。 对应的脚本特性为lineHeight。 &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211; 下面说说再说说line-height单行文本的垂直居中问题 先写个height、line-height都为25px，背景为红色的元素，设置文字为12px。然后量下，文字上面是6像素，文字下面是8像素。。同时增加或者减少height、line-height 1px发现如果当前值是奇数那1px会加到文字和底部空间里而减少时减掉的是文字和顶部空间的1px（加下减上）；为偶数时刚好相反：加上减下。当我们给文字加下划线的时候发现文字的垂直位置并没变，这能说明什么呢？还不太肯定，继续同时减小heighe、line-height直到一个合适的值：14px，这时候我们可以看到文字和下划线都是完整的，继续减小1px。这时IE已经不按我们刚才发现的规矩办事了，文字上面被截去1px，这样看来14px应该是IE认为的一个临界点，此时整体高低减去文字高度刚好为3px。会不会？。。。因为这时文字是顶这上边界的，我们把文字增加到2行，发现了吧，第二行的文字不是顶这第一行的下划线的，而是有1px的距离。3px果然是下划线的高度。 其实这里还有一点特殊的地方就是如果我们一开始把height、line-height都设为30px那这时2px会变为3px。这个可以用我们上面得出的“偶数情况加上减下的结论”解释：heighe、line-height同为30px的时候上下空白区域高度差是3px，然后height、line-height同时加1px(就是31px)，这1px应该是加到上部空间里，所以3pxbug会变成2pxbug。 IE6-IE8都有这个问题，firefox，Opera，Safari也都存在这个问题， 比如： &#60;div style=&#34;height:25px;line-height:25px;background:red;color:#FFFFFF;font-size:12px;&#34;&#62;文字字&#60;/div&#62; 如图： 文字上面是6像素，文字下面是8像素。(转载请注明出处：WEB前端开发 http://www.css88.com/) 再如： &#60;div style=&#34;height:30px;line-height:30px;background:red;color:#FFFFFF;font-size:12px;&#34;&#62;文字字&#60;/div&#62; ie下：文字上面是8像素，文字下面是11像素；firefox，Opera，Safari下：文字上面是9像素，文字下面是10像素； 算一下我们就可以知道，其实没带下划线的12px文字在显示的时候都是11像素。 有2个相对解决方案; 方案1、加padding-top：(转载请注明出处：WEB前端开发 http://www.css88.com/) &#60;div style=&#34;height:22px;line-height:22px; padding-top:3px;background:red;color:#FFFFFF;font-size:12px;&#34;&#62;文字字&#60;/div&#62; 方案2、加overflow:hidden： &#60;div style=&#34;height:25px;line-height:28px;background:red;color:#FFFFFF;font-size:12px; overflow:hidden&#34;&#62;文字字&#60;/div&#62; 声明: 本文采用 BY-NC-SA [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1304/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

