时间:2021-05-28
无意中发现,针对同一HTML标记,在CSS中同时应用了font和line-height属性时,就得小心了,这二者的书写顺序不一样,会导致显示效果不同。
即:
>>>如果先写font,再写line-height,显示效果正常
>>>如果先写line-height,再写font,则line-height定义的效果会丢失,在IE、Firefox、Opera下都出现这种BUG
具体效果请看以下代码:
<p>h1:</p>
<h1style="background:#f00;margin:5px0;font:bold20px宋体,Geneva,Arial,sans-serif;line-height:40px;">IECN.Net-专注Web技术,体验开发乐趣!</h1>
<h1style="background:#f00;margin:5px0;line-height:40px;font:bold20px宋体,Geneva,Arial,sans-serif;">IECN.Net-专注Web技术,体验开发乐趣!</h1>
<p>div:</p>
<divstyle="background:#f00;margin:5px0;font:bold20px宋体,Geneva,Arial,sans-serif;line-height:40px;">IECN.Net-专注Web技术,体验开发乐趣!</div>
<divstyle="background:#f00;margin:5px0;line-height:40px;font:bold20px宋体,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:italicsmall-caps60012pts/18pts宋体;}
作者:ztu http://www.dnew.cn/post/217.htm#topreply
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
无意中发现,针对同一HTML标记,在CSS中同时应用了font和line-height属性时,就得小心了,这二者的书写顺序不一样,会导致显示效果不同。即:>>>
CSS:复制代码代码如下:body{line-height:1.5;font:14px/1.5arial,serif;color:#AAA;}.notifica
要加上line-height,并且加上CSS代码:复制代码代码如下:#div-a{height:60px;line-height:60px;}XHTML代码:复
常常使用line-height设置内容(图片、文字)行高上下居中样式效果。一、line-height行高语法复制代码代码如下:line-height:22px.
body{font-size:12px;line-height:150%;}table{font-size:12px;line-height:150%;}a:l