如何设置SPAN的高度属性

Question

我需要使用预定义的高度制作以下代码

<style>
.title{
   background: url(bg.gif) no-repeat bottom right;
   height: 25px;
}
</style>

<span class="title">This is title</span>

但由于span是内联元素,因此"height"属性不起作用.

我尝试使用div代替,但它将扩展到上部元素的宽度.宽度应该灵活.

任何人都可以建议任何好的解决方案吗？

提前致谢.

Answer 1

给它一个display:inline-blockCSS - 应该让它做你想要的.
在兼容性方面:IE6/7 将适用于此,因为怪癖模式建议:

IE 6/7仅接受具有自然显示的元素的值:内联.

Answer 2

使用

.title{
  display: inline-block;
  height: 25px;
}

唯一的技巧是浏览器支持.检查支持的浏览器列表是否在此处理内联块.

Answer 3

这是为了使显示:内联块在所有浏览器中工作:

很奇怪,在IE(6/7)中,如果你用"zoom:1"触发hasLayout然后将显示设置为内联,它就像一个内联块.

.inline-block {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

Answer 4

假设您不想将其设为块元素,那么您可以尝试:

.title  {
    display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
    line-height: 2em; /* or */
    padding-top: 1em;
    padding-bottom: 1em;
}

但最简单的解决方法是简单地将.title作为一个块级元素,并使用相应的标题标签<h1>通过<h6>.