font和line-height之CSS代码书写顺序不同,导致显示效果不一样
2023-06-13 09:13:56 时间
无意中发现,针对同一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 宋体; }
作者:ztuhttp://www.dnew.cn/post/217.htm#topreply
即:
>>> 如果先写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
相关文章
- 多说360度旋转css代码
- 点击导航栏,切换div内容(js+css+html)[通俗易懂]
- 怎么创建css样式表,怎样创建可反复使用的外部CSS样式表?[通俗易懂]
- 在html中加入外部css样式,如何引入CSS样式表?
- CSS(初级)笔记
- CSS笔记(5)
- CSS笔记(12)
- css图片居中的几种方法_html上下居中代码
- 《简单记个笔记》之表单标签加CSS选择器
- 通过HTML和CSS设计一个静态网页(练习实例,附完整代码)
- css字体渐变色_html美化代码
- 分享发文章可以用得上的几个css样式和短代码
- 如何使用前端css代码去掉百度地图左下角的图标
- 【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )
- 【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- 【CSS】固定定位示例 ( 屏幕左右两侧广告栏 | 开发要点分析 | 代码示例 )
- HTML-CSS-JS Prettify 代码格式化插件
- CSS语法详解编程语言
- 一个新的CSS菜单代码
- javascript+css实现单击颜色褪去效果
- 如何用js控制css中的float的代码
- CSS标签切换代码实例教程比较漂亮
- CSS顶级技巧大放送,div+css布局必知
- CSS首字母大写代码
- 用CSS来控制图片显示大小的代码
- JS使用getComputedStyle()方法获取CSS属性值