一种特殊效果的HACK方法

css_ef.gif请看这个在[tag]WordPress[/tag]的控制面板中没有页面的标题效果,它下面的兰色条是用边框来实现的,开始我用这样方法来定义:

  1. h2 {
  2. border-bottom: 16px solid #E5F3FF;
  3. height: 5px;
  4. font-size: 30px;
  5. font-weight: normal;
  6. color: #333;
  7. }

在Firefox下就能达到这样的效果,但是在IE下由于height定义的5px高度被其中的内容改变,所以兰色边框始终在文字的下方无法与文字叠加。
我查看了WordPress后台的样式表,发现它这个里是这样定义的:

  1. /* 正确的HACK方法 */
  2. h2 {
  3. border-bottom: .5em solid #E5F3FF;
  4. font: normal 32px/5px serif;
  5. color: #333;
  6. }

这样定义就可以让Firefox和IE都能够达到同样的效果,关键点就在font属性定义,起作用的是“32px/5px serif”这两个值,不知道serif字体在显示的时候有什么特殊的属性,还有就是32px/5px这样的写发我是第一次见到是什么意思我在网上没有找到任何的信息,如果有那位朋友知道为什么这么定义请麻烦教我一下,在这里谢谢了!

如果您第一次来到我的博客为什么不订阅我的RSS feed呢?.

-->

目前共有 2 条评论

发表评论:

  1. Gravatar
    风的影子

    font是一个复合属性,
    32px/5px指字号/行高。

    还有,这不是一种hack,而是因为你上面的一个定义中没有定义行高。:P

    [回复评论]


  2. Gravatar
    元晖

    原来如此啊,感谢您的指点。现在终于明白怎么回事了。

    [回复评论]