脚本宝典收集整理的这篇文章主要介绍了font和line-height之CSS代码书写顺序不同,导致显示效果不一样,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
无意中发现,针对同一HT
ML标记,在CSS中同时应用了font和line-h
eight属性时,就得
小心了,这二者的书写顺序不一样,会导致显示效果不同。
即:
>>>&nbs
p;如果先写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;mar
gin: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-f
amily
例子:p { font:
ITalic small-caps 600 12pts/18pts 宋体; }
作者:ztu
http://www.dnew.cn/post/217.htm#toPReply
脚本宝典总结
以上是脚本宝典为你收集整理的font和line-height之CSS代码书写顺序不同,导致显示效果不一样全部内容,希望文章能够帮你解决font和line-height之CSS代码书写顺序不同,导致显示效果不一样所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。