如何设置SPAN height属性

Question

我需要下面的代码伸缩性与预定高度

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

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

但自的跨度是内嵌元件， “高度” 属性将不起作用。

我试图使用的 DIV 代替，但它会扩展到上部元件的宽度。和宽度应该是灵活的。

任何人都可以提出任何好的解决这个？

预先感谢。

Answer 1

给它在CSS中display:inline-block - 这应该让他做你想要的结果。 在兼容性方面：IE6 / 7的将与此工作，因为怪异模式表明：

  

IE 6/7只接受在具有自然的显示元件的值：内嵌

Answer 2

使用

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

唯一的技巧是浏览器支持。 检查您支持的浏览器手柄的名单inline-block的这里。

Answer 3

这是使显示：内联块工作在所有浏览器：

Quirkly足够，在IE（6/7），如果触发hasLayout的与“缩小：1”。然后将显示器设置为内联的，其表现为内联块

.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>。

Answer 5

跨度{ display: table-cell; height: (your-height + px); vertical-align: middle; }

有关跨度到像一个表单元（或任何其它元件，就此而言）的工作，高度必须被指定。我已经给了跨越的高度，他们的工作只是罚款 - 但你必须添加的高度，让他们做你想要的。

Answer 6

当然另一种选择是使用JavaScript（Jquery的这里）：

$('.box1,.box2').each(function(){
    $(this).height($(this).parent().height());
})

Answer 7

为什么你需要在这种情况下，一个跨度？如果你想样式高度可你只需要使用一个div？你可以尝试用display: inline一个div，虽然可能有同样的问题，因为你实际上会做同样的事情，作为一个跨度。