font和line-height之CSS代码书写顺序不同,导致显示效果不一样_经验交流

无意中发现,针对同一HTML标记,在CSS中同时应用了font和line-height属性时,就得小心了,这二者的书写顺序不一样,会导致显示效果不同。
即:
>>> 如果先写font,再写line-height,显示效果正常
>>> 如果先写line-height,再写font,则line-height定义的效果会丢失,在IE、Firefox、Opera下都出现这种BUG

具体效果请看以下代码:

<p>h1:</p>
<h1 style="background:#f00;margin:5px 0;font:bold 20px 宋体,Geneva,Arial,sans-serif;line-height:40px;">IECN.Net - 专注Web技术,体验开发乐趣!</h1>
<h1 style="background:#f00;margin:5px 0;line-height:40px;font:bold 20px 宋体,Geneva,Arial,sans-serif;">IECN.Net - 专注Web技术,体验开发乐趣!</h1>

<p>div:</p>
<div style="background:#f00;margin:5px 0;font:bold 20px 宋体,Geneva,Arial,sans-serif;line-height:40px;">IECN.Net - 专注Web技术,体验开发乐趣!</div>
<div style="background:#f00;margin:5px 0;line-height:40px;font:bold 20px 宋体,Geneva,Arial,sans-serif;">IECN.Net - 专注Web技术,体验开发乐趣!</div>

原文:http://www.cnlei.org/blog/article.asp?id=343

注:看了枫岩的留言,去查了下CSS帮助文档

引用
对font的定义参数必须按照如下的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值:
font : font-style || font-variant || font-weight || font-size || line-height || font-family 
例子:p { font: italic small-caps 600 12pts/18pts 宋体; } 

作者:ztu http://www.dnew.cn/post/217.htm#topreply

时间: 2024-10-27 15:56:11

font和line-height之CSS代码书写顺序不同,导致显示效果不一样_经验交流的相关文章

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法_经验交流

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 

一些很不错的css技巧,但也常为人们所忽略_经验交流

一.区分大小写 当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的.为了避免这种错误,我建议所有的定义名称都采用小写. 二.不需要给背景图片路径加引号 为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必须的.例如: background:url("images/***.gif") #333;  可以写为 background:url(images/***.gif) #333;  如果你加了引号,反而会引起一些浏览器的错误. 三.用正确的顺序指定链接的样式 当你用

CSS 浮动清理,不使用 clear:both标签_经验交流

例如:         <div style="background:#666;"> <!-- float container -->                 <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>         </div> 此时预览此代码,我们会发现最外层的父元素f

CSS渐变文本效果的两种方法比较_经验交流

是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数主流浏览器.当然, IE6需要一个支持透明PNG的Hack(值得庆幸的是微软正在极力的将用户的IE6自动升级到IE7^.^, 延伸阅读:Warning: An IE7 Auto-Update Is Coming Soon) 优势 这是纯粹的css技巧,没有使用任何ja脚本或者flash, 并且它可以在大多数浏览器上正常工作(IE6

在DW中CSS编码需要注意和掌握的一些技巧_经验交流

由于"可视化"和操作简便,在DW中编写CSS的朋友很多,今天我们介绍一些在DW中编写CSS的"最佳习惯",希望对大家有所帮助. CSS正在改变网站设计的进程.为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW MX引进了一些新的及改善过的CSS相关的特性.有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点.本文讨论在DW MX中使用CSS以及突出某一特定CSS特性时的一些建议. 一般地讲,样式表(style sheet

Css Reset(复位)方法整理第1/3页_经验交流

相信看完全文您会对Css Reset有个重新的认识PS: 复制代码 代码如下: * { padding: 0; margin: 0; } 这就是最常用的Css Reset,但是这里会有很多问题. 原文前部分说了很多关于Css,以及各浏览器的css规则的不同,而制定"Css Reset"也是为了兼容与统一,正确有效的使用"Css Reset"可以在某种程度上节约时间与金钱. 非常感谢Perishable的整理与归纳 下面是关于几类Css Reset的简单介绍,本人能力

css 不换行 自动换行 强制换行的实现方法_经验交流

强制不换行 div{ white-space:nowrap; } 自动换行 div{  word-wrap: break-word;  word-break: normal;  } 强制英文单词断行 div{ word-break:break-all; } CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认  pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 设置强行换行: wor

提高CSS网页渲染效率的11点注意事项_经验交流

1.十六进制的颜色值对位数与大小写  编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注.在未知情况下不希望冒险而降低了渲染的效率.  * 不赞成 - color:#f3a;  * 建议用 - color:#FF33AA;  2.display与visibility的差异  他们用于设置或检索是否显示对象.display隐藏对象不保留物理空间,visibility为隐藏对象保留占据的物理空

CSS仿淘宝首页导航条布局效果_经验交流

以下是CSS内容部分: 以下是引用片段: 首页 数码通讯 女人 男人 家居 书籍音像 运动 游戏 宠物 香港街 淘宝商城 仿淘宝网首页导航条效果 转载请注明出处 子鼠 www.zishu.cn 2006-05-21 凌晨03:05分 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]