jQuery显示/隐藏 - CSS显示值正在影响我的布局

Question

jQuery display在简单show()和hide()函数的引擎下使用CSS 属性.以下HTML包含三个按钮,每个按钮都包含在一个<span>标记中,并且所有三个<span>标记都放在父<div>容器中.在页面加载时,<span>使用jQuery隐藏标记hide(),稍后在某些时候,使用该show()函数显示它们.HTML现在处于以下状态,<span>标签已收到样式值display: block;.

<div style="text-align:right; width:100%;">
    <span style="display:block">
        <input type="button" value="Button1" />
    </span>
    <span style="display:block">
        <input type="button" value="Button2" />
    </span>
    <span style="display:block">
        <input type="button" value="Button3" />
    </span>
</div>

在Firefox(3.5)中,span元素显示为垂直堆叠在一起,而在IE中它们显示为内联.我会在两种浏览器中都期望后者,因为我认为span标签的默认布局是内联的.

如果我手动将样式更改display:block为display: inline;,则在Firefox中看起来是正确的.本质上,当显示一个元素时,jQuery使用的值display并不总是有效.添加display: block; 足以显示元素,但不足以用我需要的内联布局显示它.

所以,对我的问题:

1. 这是jQuery的已知问题吗？我正在使用jQuery 1.2.6.
2. 以前有没有人遇到过这个问题,你是怎么解决这个问题的？

Answer 1

起初,似乎从响应中可以看出,如果我想要一个display除了之外的值,那么使用show/hide函数是不可能的block.

但是,我注意到,当<span>标签处于隐藏状态时,jQuery已经oldBlock为每个标签添加了一个属性.然后我意识到这是为了display在隐藏元素时临时存储CSS值,以便在再次显示元素时可以恢复适当的值.

因此,我需要做的就是在隐藏元素之前设置适当的显示值.

初始状态:

<div style="text-align:right; width:100%;">
    <span style="display:inline">
        <input type="button" value="Button1" />
    </span>
    ...
</div>

呼叫.hide()将我们带到这种状态:

<div style="text-align:right; width:100%;">
    <span style="display:none" oldBlock="inline">
        <input type="button" value="Button1" />
    </span>
    ...
</div>

呼叫show()将我们带回到这个状态:

<div style="text-align:right; width:100%;">
    <span style="display:inline">
        <input type="button" value="Button1" />
    </span>
    ...
</div>

主要问题是我在初始状态下没有给<span>元素赋值display.因此,它们将隐式接收浏览器默认值,这似乎inline与我预期的一样.但是,oldBlock如果display 在调用hide()函数之前显式设置了值,则jQuery将仅使用该属性.如果没有oldBlock属性,则该show()函数使用默认值block.