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

赞 (0)

相关推荐

  • word-wrap

    word-wrap : normal | break-word 参数: normal : 允许内容顶开指定的容器边界break-word : 内容将在边界内换行.如果需要,词内换行(word-break)也行发生 说明: 设置或检索当当前行超过指定容器的边界时是否断开转行.对应的脚本特性为wordWrap.请参阅我编写的其他书目. 示例: div { word-wrap: break-word; } word-break : normal | break-all | keep-all 参数: n

  • 用CSS动态控制文本属性

    本篇详细介绍了用CSS动态控制文本属性的文章主题,利用CSS的属性值可动态改变的特点,定义文本的多种属性值,再用一个事件来触发,一旦事件发生,则改变文本属性值,从而达到预期目的. 用CSS可以很方便地动态改变文本的属性,从而可制作出动态地使文字变大.缩小.改变文字颜色.改变文本的背景.字间距.行间距等等网页特效,一切都在你的掌握之中.是不是有点玄?事实就是如此.那一定很复杂吧?不!看完本文,你就会明白,原来这么简单. 请看下面的示例: 一.动态改变文字大小 这个例子的效果是:一段文本,当鼠标在这

  • css white-space:nowrap属性用法（可以强制文字不换行输出）

    强制不换行,直接使用white-space:nowrap即可.CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象例:强制不换行 复制代码 代码如下: div{white-space:nowrap;}

  • CSS属性 - white-space 空白属性使用说明

    CSS属性 - white-space 空白属性说明 该CSS属性用来处理空白. 值:normal | pre | nowrap | inherit 可用值 值的说明  normal 缺省值.文本自然换行.如果超过元素宽度,内容自然换到下一行.  nowrap 不允许换行.  pre 保留换行和空白.这个值只有当你声明了!DOCTYPE,且 IE 6 以上版本才支持. 在 HTML 文件里,空白,比如换行符 (line breaks). 空格 (spaces). 制表符 (tabs),都被自动截

  • 从零学CSS系列之文本属性

    从零学CSS系列之文本属性

    1.line-height 可以给某个元素指定一个不带单位的缩放因子,这样它的后代元素就会继承这个缩放因子,再根据自身的字号大小来计算自己的行高(line-height)值, 复制代码 代码如下: body {  font-size: 12px;  line-height: 1.5;} h1 {  font-size: 36px;} 这里,body 的 line-height 是 18px(12 * 1.5),而 h1 的 line-height 则是 54px(36 * 1.5). 就算使用

  • word-wrap在firefox中不起作用的解决方法

    完整的css代码为 复制代码 代码如下: word-wrap:break-word; overflow:hidden; 这段代码应添加到td标签的样式中.另外,应该在外层的table标签中添加样式 复制代码 代码如下: table-layout:fixed;

  • 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=&

  • 小心：CSS代码书写顺序不同，导致显示效果不一样

    无意中发现,针对同一HTML标记,在CSS中同时应用了font和line-height属性时,就得小心了,这二者的书写顺序不一样,会导致显示效果不同. 即: >>> 如果先写font,再写line-height,显示效果正常 >>> 如果先写line-height,再写font,则line-height定义的效果会丢失,在IE.Firefox.Opera下都出现这种BUG 具体效果请看以下代码: h1: IECN.Net - 专注Web技术,体验开发乐趣! IECN.N

  • firefox推荐与个人理解的css书写顺序

    最近的工作中,遇到不少问题,其中一个问题我觉得是最重要的,那就是css的书写顺序,他可以体现一个前端工作者的思续.如果您看到本文,请不要再想到哪个属性就写哪个属性. 先来看一下firefox推荐的书写顺序 * mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup) */ /* Sugg

  • 调整CSS类型的顺序改变链接翻滚效果

    你也许已经意识到,你可以通过指定每一键接的不同风格以建立CSS翻滚效果,这些链接包括普通的链接link (normal), 访问,翻转,以及激活.并且,你可能也知道CSS类型的顺序可以产生效果上的差别,CSS代码后顺序的风格将会取代针对于相同元素的前顺序的风格.建立翻滚效果的类型顺序显得相当重要.     现在让我们看看如何安排链接状态的类型在不产生冲突的情况下支持正常的翻滚效果,并且如何重新安排这些类型顺序以获得不同的翻滚效果. 链接状态 典型的CSS翻滚效果依赖于超链接中四个状态之一的独立类

  • CSS代码检查工具stylelint的使用方法详解

    CSS代码检查工具stylelint的使用方法详解

    CSS不能算是严格意义的编程语言,但是在前端体系中却不能小觑. CSS 是以描述为主的样式表,如果描述得混乱.没有规则,对于其他开发者一定是一个定时炸弹,特别是有强迫症的人群.CSS 看似简单,想要写出漂亮的 CSS 还是相当困难.所以校验 CSS 规则的行动迫在眉睫.stylelint是一个强大的现代 CSS 检测器,可以让开发者在样式表中遵循一致的约定和避免错误.本文将详细介绍CSS代码检查工具stylelint 概述 stylelint拥有超过150条的规则,包括捕捉错误.最佳实践.控制可

  • 用于CSS代码压缩与格式化的javascript函数代码

    复制代码 代码如下: var lCSSCoder={ format : function(s){//格式化代码 s=s.replace(/\s*([\{\}\:\;\,])\s*/g,"$1"); s=s.replace(/\,[\s\.\#\d]*{/g,"{"); s=s.replace(/([^\s])\{([^\s])/g,"$1 {\n\t$2"); s=s.replace(/([^\s])\}([^\n]*)/g,"$1\n

  • Javascript实现的CSS代码高亮显示

    相比JavaScript,CSS的语法就简单多了,主要是处理注释.字符串.CSS样式名称.CSS样式值.缩进和换行,具体详情请看代码. Javascript实现CSS代码高亮显示 body{ font-size:12px; line-height:1.8; font-family:'Courier New', Courier, monospace; } #area{ width:320px; height:120px; } body{ font-size:12px; line-height:1.

  • CSS代码缩写技巧

    Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里.影响速度的因素有很多种,包括Web服务器的速度.访问者的Internet连接情况,以及浏览器必须下载的文件大小.尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小. 为了让网站能够更快,Web的建设者都会按常规地压缩和优化网站上的每一个图像文件,这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量.由于CSS样式表是纯文本文件,和图像相比相对较小,所以Web建设者很少考虑

  • CSS代码格式化和压缩的方法与技巧

    第一步:需要掌握css的缩写技巧参考下面的文章即可CSS缩写优化CSS文件的体积CSS常用属性缩写实例[推荐]第二步:用css在线格式化与压缩工具第三步:测试,看看经过压缩后的css文件,会不会导致页面变形等问题,一般情况下不会,不排除特殊情况.别忘了备份样式文件啊. 下面是一般用于css压缩的代码,一般情况下,喜欢脚本的朋友看下.具体的应用上面的两部即可. CSS代码格式化和加密化 CSS代码格式化和加密化 /*请将CSS代码复制到这里,下面是示例*/ input,button{ height

  • javascript 动态生成css代码的两种方法

    javascript 动态生成css代码的两种方法 有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中.但有些兼容性问题我们需要解决.首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可,而在IE中则需要利用style元素的styleSheet.cssText来解决.还需要注意的就是在有些版本IE中一个页面上style

随机推荐